开发工具与关键技术:CSS3动画(旋转)
作者:刘鑫婷
撰写时间:2019年1月17日
下面我们来看一个简单的旋转动画,HTML代码的截图:
在css样式中给每个div设置具体的宽度、高度、位置(定位)、颜色、旋转的角度(可设可不设),达到下面的截图效果:
然后去css中设置旋转的效果并调用动画,下面截图为css中的关键帧设置,其中的margin值可以使截图中的div盒子达到位移的效果。
如果没有margin值则div盒子在原点旋转,效果如下图:
下图为有margin值且运行中的效果: