Download
2017-12-17, 06:02:42
I created a new template where this is inserted on at the beginning of the <body>:
This is the respective css:
Any ideas?
Code:
<ul class="box">
<?php
$bc = return_i18n_breadcrumbs(return_page_slug());
get_i18n_navigation($bc[0]['url']=='index'?return_page_slug():'index',1,99);
?>
</ul>This is the respective css:
Code:
.box {
background-color: white;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
border: 1px solid red;
}
.box ul {
display: flex;
flex-direction: column-reverse;
}
.box li {
text-align:center;
display: block;
flex: 0 0 auto;
width: 150px;
height: 150px;
background-color:black;
box-shadow: 5px 5px 5px rgba(0,0,0,6);
position: absolute;
-webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-moz-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
-o-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
animation: moveX 12s linear 0s infinite alternate, moveY 10.4s linear 0s infinite alternate;
}
.box li a {
text-decoration: none;
color:white;
}
.box li:hover {
animation-play-state: paused;
-moz-box-shadow:10px 10px 7px red;
-webkit-box-shadow: 10px 10px 7px red;
box-shadow:10px 10px 7px red;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
z-index:5;
}
@-webkit-keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@-moz-keyframes moveX {
from { left: 0; } to { left: 480px; }
}
@-o-keyframes moveX {
from { left: 0%; } to { left: 480px; }
}
@keyframes moveX {
from { left: 0%; } to { left: 95%; }
}
@-webkit-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@-moz-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@-o-keyframes moveY {
from { top: 0; } to { top: 280px; }
}
@keyframes moveY {
from { top: 0%; } to { top: 95%; }
}Any ideas?
