该博客介绍了如何通过CSS3的animation属性创建一个360度旋转的效果。博主详细解释了@-webkit-keyframes和@keyframes在定义动画过程中的作用，并展示了如何应用到div元素上，使10个嵌套的div实现连续旋转。代码示例中，div被设置为红色圆形，通过-webkit-animation和animation属性设置了无限循环的8秒旋转动画。
效果如下
实现原理：
使用CSS3的animation效果完成滚动切换。
代码说明：
样式表中@-webkit-keyframes及@keyframes定义了旋转360度的操作；
样式表中.border div定义了div的基本样式，红色的10px圆形；
10个div嵌套使用;
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(-360deg);
}
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
.border{
position: absolute;
top: 10px;
left: 10px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.border div {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0px 30px #FF0000;
-webkit-animation: rotate 8s infinite linear ;
animation: rotate 8s infinite linear ;
}
原文：http://www.cnblogs.com/z-gia/p/3708968.html
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
