开发工具与关键技术:前端

作者:黄志鹏

撰写时间:2019/1/25

在前端css3中提供了很强大的animation动画,它可以指定多个关键帧,从而允许定义更加丰富的自定义动画

下面我们来用纯css做一个模仿抽奖的动画,首先我们先布局,一个div里放9个span标签,整体布局就是这样了。

代码如下

模仿抽奖动画

在设置9个span标签相同的宽高后,再用弹性布局成九宫格型。

代码如下

模仿抽奖动画

浏览器输出为

模仿抽奖动画

另外我们调用关键帧加一个在不断转动的小子针,和一个随子针一起转动的闪光灯。

代码如下

模仿抽奖动画

浏览器输出为

模仿抽奖动画
好了我们的模仿抽奖动画就完成了

相关文章:

  • 2021-06-24
  • 2021-11-16
  • 2022-12-23
  • 2021-11-22
  • 2021-11-28
  • 2022-01-08
  • 2021-10-09
猜你喜欢
  • 2022-12-23
  • 2023-01-13
  • 2021-05-15
  • 2021-12-06
  • 2022-12-23
  • 2021-12-24
相关资源
相似解决方案