CSS3实现旋转

在这个动画里,我觉得比较有意思的就是这个黑点的旋转.我们这次就来实现这个效果.因为其他效果都是没难度的

我们先来看完整代码

body>div{

width:100px;

height:100px;

margin: 20px auto 0;

color:orange;

font-size:100px;

line-height:1;

animation: circle 5s linear 0s infinite;

transform-origin: 0% 300%;

}

div>div{

animation: inner-circle 5s linear 0s infinite;

}

@keyframes circle {

from { transform:rotate(0deg); }

to { transform:rotate(360deg); }

}

@keyframes inner-circle{

from{

transform: rotate(360deg);

}

}

☺

重点的代码讲解

1. 设置移动外层的样式,其实外观主要是这个div

body>div

2.
重点主要在下面CSS里,设置运动的原点坐标,改变这里就可以

（transform-origin是设置2D或者3D效果的属性。一般和transform一起使用。此例中是指按离Y轴300%的距离进行旋转。）​

transform-origin: 0%
300%;

3. div>div
的CSS动画主要是保证笑脸摆正.如果不需要,当然是可以不用设置其样式的.