inmind

V2EX 第 25164 号会员，加入于 2012-08-10 18:41:18 +08:00

inmind 最近回复了

2012-08-10 18:41:57 +08:00

回复了 balibell 创建的主题 › 酷工作 › 完成一题即可通过的前端笔试题

<!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>

» inmind 创建的更多回复