<div class="snapchat snapfloat">
<div class="snapchat_back"></div>
<div class="snapchat_rotor"></div>
</div>
/*
==============================================
MAIN
==============================================
*/
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
background: linear-gradient(0deg, #dd0000, #2f6c7f);
}
/*
==============================================
ELEMENTS
==============================================
*/
.snapchat {
height: 55vw;
width:55vw;
position: absolute;
margin-left: 11vw;
top:0;
}
.snapchat_buttonbox {
margin-top:16vw;
margin-left: 15vw;
top:0;
}
.snapchat_back {
z-index: 0;
background-image: url('http://themes.opderdan.de/platformer/snapchat_back.png');
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
position: absolute;
height: 100%;
width:100%;
}
.snapchat_rotor {
z-index: 4;
background-image: url('http://themes.opderdan.de/platformer/snapchat_rotor.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 20%;
width:20%;
margin-left: 1vw;
bottom:0;
margin-bottom: 7vh;
-webkit-animation:rotor 3.5s linear infinite;
-moz-animation:rotor 3.5s linear infinite;
animation:rotor 3.5s linear infinite reverse;
}
@-moz-keyframes rotor {
100% { -moz-transform: rotate(360deg);
}
}
@-webkit-keyframes rotor {
100% { -webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
.snapfloat{
animation-name: floating;
-webkit-animation-name: floating;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes floating {
0% {
transform: translateY(0%);
}
50% {
transform: translateY(1%);
}
100% {
transform: translateY(0%);
}
}
@-webkit-keyframes floating {
0% {
-webkit-transform: translateY(0%);
}
50% {
-webkit-transform: translateY(21%);
}
100% {
-webkit-transform: translateY(0%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.