CSS特效-变色loading

我正在参与掘金创作者训练营第5期，点击了解活动详情

👨‍🚀 作者：Torn
📢 版权声明：文章里可能部分文字或者图片来源于互联网或者百度百科，如有侵权请联系处理

效果

高阶知识

transform

transform属性允许你旋转，缩放，倾斜或平移给定元素。 主要的函数有：

函数	作用
matrix	2d转换
translate	平移
scale	缩放
rotate	旋转
skew	倾斜转换

animation

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name：动画名称
• animation-duration：动画间隔时间
• animation-timing-function：动画的速度曲线，取值有linear(固定速度)、ease(低速开始、加快、结束变慢)、ease-in(低速开始)、ease-out(低速结束)、ease-in-out(低速开始和结束)、steps(固定步长)、cubic-bezier(贝塞尔函数)
• animation-delay：动画开始之前的延时
• animation-iteration-count：动画的播放次数
• animation-direction：动画播放的方向，取值有normal(向前、起点)、alternate(交替反向运行)、reverse(从头到尾)、alternate-reverse(反向交替)
• animation-fill-mode：动画在执行之前和之后如何将样式应用于其目标
• animation-play-state：动画是否运行或者暂停

filter

filter 属性将模糊或颜色偏移等图形效果应用于元素。其预定义的效果函数有：

函数	作用
blur	高斯模糊
brightness	明亮度
drop-shadow	阴影
grayscale	灰度
contrast	对比度
hue-roate	色相旋转
invert	反转
opacity	透明度
saturate	饱和度
sepia	转化为深褐色

css变量

css变量带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

设计思路

1. 首先将20个小圆球平均分布在360度方向上；
2. 然后给每个小圆球设置放大、缩小的动画；
3. 紧接着给每个小圆球设置颜色动画；
4. 最后给每个小圆球设置不同的动画延时。

实现

1. 首先将20个小圆球平均分布在360度方向上；

   • 首先定义20个span；
   • 然后使用transform:rotate函数分布在360度方向上；
   • 最后使用:before伪类创建小圆球；

2. 然后给每个小圆球设置放大、缩小的动画；

   • 使用animation动画，并在0%的关键帧添加放大为0，以及100%的关键帧添加放大为1的动画；

3. 紧接着给每个小圆球设置颜色旋转动画；

   • 使用animation动画，给每个圆球设置颜色动画，其颜色通过filter:hue-rotate控制；

4. 最后给每个小圆球设置不同的动画延时。

   • 使用animation-delay设置动画延时；