网站首页 > 基础教程正文

四步CSS3教你搞定小菊花 Loading 动画

ccvgpt 2024-11-09 11:24:25 基础教程 7 ℃

作者： Lefex 素燕

转发链接：https://mp.weixin.qq.com/s/0klnoP6M90uU1g2g433swQ

前言

做动画最要的是思路，做多了，动画其实非常简单，我们今天来实现一个小菊花加载动画：

做动画的关键一步是「拆分」，这张图中包含了 12 根「小柱子」，每根小柱子的透明度不一样，让这 12 根「小柱子」旋转起来，就构成了整个动画：

做这个动画可以按照下面几步来实现：

第一步：画出 12 根小柱子，并设置不同的透明度。通过观察发现，我们可以画 12 个正方形，每个正方形中画 1 条竖线，通过旋转的方式来改变小柱子的位置：

代码可以这样写，创建一个 div 来包裹这 12 个正方形，通过 ::before 给正方形添加一个小柱子：

第二步：想把这 12 个正方形组合成一个圆，需要把它们旋转一下，每个正方形旋转 30度，正好是 1 圈（30*12=360），并设置不同的透明度：

代码类似这样，把每个元素进行旋转 30度，为不影响阅读体验，我只截了 3 个元素的代码图：

第三步：这 12 个正方形现在是竖直排列的，我们把它们重叠到一块，这些小柱子就组成了一个圆。

修改类选择器 dot 的 position 属性为 absolute，这时这些元素即可重叠起来：

为了好辨别，我给每个正方形加了边框，我把边框去掉就成了我们想要的效果：

第四步：让这个圆旋转起来就可以了：

旋转直接使用 CSS 的 animation 即可实现，这个地方需要大家注意一下，这里用的 timing-function 是 steps(12)，关于 step 函数，在小猴子跌落山崖之 linear、ease、ease-in 这节内容中我并没有提到，这里补存一下。steps 它可以把一个动画的 duration 分成几段，每段来完成一个动作，动画执行期间元素看起来并不是「平滑」地过度，比如钟表的秒针跳动：

这个小菊花的 Loading 也是让它有类似的效果，一蹦一蹦的感觉。

今天这节内容主要利用了 transform 的 rotate() 函数，在让按钮“呼吸”一会（呼吸动画）这节内容中运用了 scale() 函数，transform 对于做动画是一把「尖刀」，关于 transform 还有很多属性值得学习：

本文借鉴了 vant-weapp 的设计思想。

网站首页 > 基础教程正文

四步CSS3教你搞定小菊花 Loading 动画

前言

推荐CSS学习相关文章

猜你喜欢

网站首页 > 基础教程 正文

四步CSS3教你搞定小菊花 Loading 动画

前言

推荐CSS学习相关文章

猜你喜欢

网站首页 > 基础教程正文