<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style>
#a{position:absolute;top:200px;left:200px;width: 400px;height: 400px;}
#a_a{position:relative;width: 400px;height: 400px;}
.aa{
-webkit-transform: rotate(360deg);
-webkit-animation-name: aa;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.aa{
-moz-transform: rotate(360deg);
-moz-animation-name: aa;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
.aa{
-o-transform: rotate(360deg);
-o-animation-name: aa;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.aa{
-ms-transform: rotate(360deg);
-ms-animation-name: aa;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#a_a_a{position:relative; width: 400px;height: 400px;border-radius: 200px; background-color:#00F;}
#a_a_b{position: absolute;top: 0;left: 0;width: 400px;height: 225px;background: #FFF;}
#a_a_b_a, #a_a_b_b{position:absolute;top:200px;width:50px;height:25px;background-color:#00F;border-top-left-radius:25px;border-top-right-radius:25px;}
#a_a_b_a{left:2px;}
#a_a_b_b{left:348px;}
#a_b{position: absolute;top: 50px;left: 50px;width: 300px;height: 300px;box-shadow: 0 0 50px;border-radius: 150px;background:-webkit-radial-gradient(60% 75%, white, #000);text-align: center;}
@
-webkit-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@
-moz-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@
-o-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@
-ms-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
</style>
<script>
</script>
</head>
<body>
<div id="a">
<div id="a_a" class="aa">
<div id="a_a_a">
</div>
<div id="a_a_b">
<div id="a_a_b_a"></div>
<div id="a_a_b_b"></div>
</div>
</div>
<div id="a_b"></div>
</div>
</body>
</html>
Select Language