开发工具与关键技术:CSS3动画(旋转)

作者:刘鑫婷

撰写时间:2019年1月17日

下面我们来看一个简单的旋转动画,HTML代码的截图:

CSS3动画(旋转)

在css样式中给每个div设置具体的宽度、高度、位置(定位)、颜色、旋转的角度(可设可不设),达到下面的截图效果:

CSS3动画(旋转)

然后去css中设置旋转的效果并调用动画,下面截图为css中的关键帧设置,其中的margin值可以使截图中的div盒子达到位移的效果。

CSS3动画(旋转)

如果没有margin值则div盒子在原点旋转,效果如下图:

CSS3动画(旋转)

下图为有margin值且运行中的效果:

CSS3动画(旋转)

相关文章:

  • 2021-04-27
  • 2021-11-07
  • 2021-12-06
  • 2021-09-06
  • 2021-09-20
  • 2021-11-03
  • 2021-11-15
  • 2021-08-13
猜你喜欢
  • 2021-08-13
  • 2022-01-10
  • 2021-08-13
  • 2021-10-31
  • 2021-08-13
  • 2017-12-20
  • 2021-08-22
相关资源
相似解决方案