| Current Path : /home/kamilrogam/poligon/css/ |
| Current File : /home/kamilrogam/poligon/css/special.css |
html,
body {
position: relative
}
.duck,
.nyan,
.fame {
line-height: 0;
z-index: 9;
}
.duck {
height: 85px;
padding: 10px 0 0;
position: relative;
overflow: hidden;
border-top: 1px solid #ccc;
}
.duck img {
position: absolute;
bottom: -6px;
right: -30%;
width: 150px;
-webkit-animation: duck 35s linear 0s infinite normal forwards;
-moz-animation: duck 35s linear 0s infinite normal forwards;
animation: duck 35s linear 0s infinite normal forwards;
overflow: hidden;
}
.nyan {
width: 100px;
position: fixed;
bottom: 70px;
left: 0;
-webkit-animation: nyan 10s linear 0s infinite normal forwards;
-moz-animation: nyan 10s linear 0s infinite normal forwards;
animation: nyan 10s linear 0s infinite normal forwards;
}
.fame {
position: absolute;
bottom: 81px;
right: 0;
width: 100px;
filter: brightness(97.5%);
-webkit-filter: brightness(97.5%);
-moz-filter: brightness(97.5%);
-o-filter: brightness(97.5%);
-ms-filter: brightness(97.5%);
}
.rainbow {
-webkit-animation: rainbow 10s linear 0s infinite normal forwards;
-moz-animation: rainbow 10s linear 0s infinite normal forwards;
animation: rainbow 10s linear 0s infinite normal forwards;
}
.invert {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.additional-info p {
padding-right: 110px;
}
@-webkit-keyframes nyan {
0% {
bottom: 70px;
left: 0;
}
25% {
left: 100%;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
bottom: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
left: 0%;
-webkit-transform: rotate(-270deg);
transform: rotate(-270deg);
}
95% {
bottom: 50px;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
bottom: 70px;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes nyan {
0% {
bottom: 70px;
left: 0;
}
25% {
left: 100%;
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
50% {
bottom: 100%;
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
75% {
left: 0%;
-moz-transform: rotate(-270deg);
transform: rotate(-270deg);
}
95% {
bottom: 50px;
-moz-transform: rotate(-360deg);
transform: rotate(-360deg);
}
100% {
bottom: 70px;
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes nyan {
0% {
bottom: 70px;
left: 0;
}
25% {
left: 100%;
transform: rotate(-90deg);
}
50% {
bottom: 100%;
transform: rotate(-180deg);
}
75% {
left: 0%;
transform: rotate(-270deg);
}
95% {
bottom: 50px;
transform: rotate(-360deg);
}
100% {
bottom: 70px;
transform: rotate(360deg);
}
}
@-webkit-keyframes duck {
0% {
right: -30%
}
100% {
right: 130%
}
}
@-moz-keyframes duck {
0% {
right: -30%
}
100% {
right: 130%
}
}
@keyframes duck {
0% {
right: -30%
}
100% {
right: 130%
}
}
@-webkit-keyframes rainbow {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@-moz-keyframes rainbow {
0% {
-moz-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-moz-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}
@keyframes rainbow {
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}