HTML
<div class="alfa">
<div class="mov">
<div class="frente">
<p id="pp">0%</p>
</div>
<div class="tras">
</div>
<div class="meio">
</div>
</div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Germania+One');
body{
margin:0px;
background-color:#C31049;
overflow-y:hidden;
}
.alfa{
position: absolute ;
top:50%;left:50%;
width:400px;
height:400px;
margin-left:-200px;
margin-top:-200px;
perspective: 1000px;
transform-style: preserve-3d;
}
.mov{
position: absolute ;
top:0px;left:0px;
width:400px;
height:400px;
animation-name:rod;
animation-duration:10s;
animation-iteration-count:infinite;
transform-style: preserve-3d;
}
@keyframes rod{
0%{ transform: rotateY( -20deg ) rotateX( 20deg ) }
25%{ transform: rotateY( 20deg ) rotateX( 20deg )}
50%{ transform: rotateY( 20deg ) rotateX( -20deg )}
75%{ transform: rotateY( -20deg ) rotateX( -20deg ) }
100%{ transform: rotateY( -20deg ) rotateX( 20deg ) }
}
.frente{
position: absolute ;
top:50px;left:50px;
width:300px;
height:300px;
border-radius:50%;
background-color: rgba( 255,255,255,.2);
transform: translateZ( 30px );
}
.tras{
position: absolute ;
top:20px;left:20px;
width:360px;
height:360px;
border-radius:50%;
background-color: rgba( 0,0,0,.2);
transform: translateZ( -30px );
animation-name:shadow;
animation-duration:10s;
animation-iteration-count:infinite;
transform-style: preserve-3d;
}
@keyframes shadow{
0%{ box-shadow: 30px 30px 40px rgba( 0,0,0,.7); }
25%{ box-shadow: -30px 30px 40px rgba( 0,0,0,.7); }
50%{ box-shadow: -30px -30px 40px rgba( 0,0,0,.7); }
75%{ box-shadow: 30px -30px 40px rgba( 0,0,0,.7); }
100%{ box-shadow: 30px 30px 40px rgba( 0,0,0,.7); }
}
.meio{
position: absolute ;
top:10px;left:10px;
width:380px;
height:380px;
border-left:5px solid #ddd;
border-radius:50%;
animation-name:loading;
animation-duration:1s;
animation-iteration-count:infinite;
}
@keyframes loading{
to { transform: none }
from { transform: rotate( 360deg ) }
}
.frente p{
text-align: center ;
color:#fff;
font-size:50pt;
font-family: 'Germania One', cursive;
margin-top:115px;
text-shadow: 0px 0px 10px #000;
}
Js
var el , num ;
el = document.getElementById("pp");
num=0;
window.setInterval( function(){
num++;
if( num > 100 ){
num = 0 ;
}
el.innerHTML = num + "%" ;
},1000/5);
Yorumlar
Yorum Gönder