大家好~ 我是前端uio，本文主要使用 CSS 实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数。有什么疑问都欢迎私聊或者在评论区留言。如果需要开发web网页或者微信小程序都可以找我私聊，我会尽可能回答我了解的内容。

---

一、最终效果展示

二、基本步骤

1.创建圆环上的圆点，自定义圆环上分布的圆点数量（圆点分布的疏密程度）本文使用的数量为50

        <div class="ringBox">
            <div v-for="(item, index) in 50" :key="index" class="circle"></div>
        </div>

.ringBox {
    margin: 80px;
    position: relative;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: red;
}

 为了方便看到效果，这里给ringBox背景设置为粉色，如下图所示，此时所有的圆点都在class为ringBox的元素的中心点上，以便设置旋转点。也可以通过调试助手查看圆点元素的位置情况。

2 .设置CSS变量（CSS自定义属性）

• 这里使用 ‘ - - i ’ 作为CSS变量，将序号index传递给该变量，从而可以使用CSS变量进行旋转操作。

• 通过 transform-origin 属性设置圆心为旋转点。

      由于 transform 的变形函数是进行矩阵的相乘运算的，所以实际上复合变换效果是从右到左应用的， translate(150px) 表示在水平方向上向右移动150像素，rotate(calc(var(--i) * calc(360deg / 50))) 表示将角度平均分成50份，与 index 进行相乘，即可得到对应的旋转角度，从而确定分布位置。

        <div class="ringBox">
            <div v-for="(item, index) in 50" :key="index" class="circle" :style="{ '--i': index }"></div>
        </div>

.ringBox {
    margin: 80px;
    position: relative;
    width: 400px;
    height: 400px;
    background-color: pink;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    transform-origin: center center;
    transform: rotate(calc(var(--i) * calc(360deg / 50))) translate(150px) ;
}

•  transform-origin 属性

    i）介绍

 transform-origin 属性用于指定元素变换的中心点，这个中心点可以是二维的也可以是三维的。当你对一个元素应用变换（如旋转、缩放、倾斜等）时，变换会围绕这个中心点进行。

 ii）使用

 transform-origin属性可以接受一个、两个或三个值，分别代表水平偏移、垂直偏移和深度偏移。这些值可以是长度单位（如像素、百分比），也可以是关键词（如 left、center、right、top、bottom）。

        ① 单个值：表示水平偏移，垂直偏移默认为 center。

        ② 两个值：第一个值表示水平偏移，第二个值表示垂直偏移。

        ③ 三个值：前两个值表示水平和垂直偏移，第三个值表示深度偏移。

•  transform 属性

  i）介绍

  transform 属性是CSS3中用于对元素进行二维或三维变换的属性。它可以包含一个或多个变换函数，每个函数代表一种变换操作，如旋转、缩放、倾斜或位移。这些变换函数可以单独使用，也可以组合使用，以创造出复杂的视觉效果。

ii）常见的变形函数

① translate()：用于在水平或垂直方向上移动元素。

② rotate()：用于围绕元素的中心点旋转元素。

③ scale()：用于放大或缩小元素。

④ skew()：用于沿水平或垂直方向倾斜元素。

⑤ matrix()：用于应用自定义的2D变换矩阵。

3.添加动画效果

• 使用 keyframes 定义关键帧

@keyframes colorChange {
    0% {
        background: green; 
    }
    100% {
        background: #fff;
    }
}

         @keyframes 是CSS中的一个规则，用于定义动画的关键帧。通过 @keyframes，可以指定动画在特定时间点的样式，从而创建复杂的动画效果。

        在 colorChange 动画开始时（0%），元素背景颜色为绿色。

        在 colorChange 动画结束时（100%），元素背景颜色为白色。

• 使用 animation 应用该动画

    animation: colorChange 2.5s infinite;
    animation-delay: calc(var(--i) * 0.05s); 

         i）animation 属性，是 CSS 中用于同时设置多个动画相关属性的简写属性。本文设置了以下几个子属性：

        ① animation-name：指定了应用到元素上的动画名称，这里是 colorChange。这意味着之前定义的 @keyframes colorChange {...} 规则将被用于这个动画。
       ② animation-duration：定义了动画完成一个周期所需的时间，这里是 2.5s（2.5秒）。这意味着动画的每一轮循环都将持续2.5秒。
       ③ animation-iteration-count：指定动画循环的次数，infinite 意味着动画将无限次地重复播放。

       ii）animation-delay 属性，定义了动画开始前的延迟时间。这里使用了 CSS 的计算函数calc() 和自定义变量 - - i 来动态计算延迟时间 。

      iii）注意：请确保 var(--i) * 0.05s = 2.5s ，即其中的数值都可以改变，但是需要确保在动画周期内所有圆形恰好完成动画，否则动画效果不能达到预期，感兴趣的话，也可自行调整查看效果。

三、主要代码

<template>
    <div>
        <div class="ringBox">
            <div v-for="(item, index) in 50" :key="index" class="circle" :style="{ '--i': index }"></div>
        </div>
    </div>
</template>
<style scoped>
.ringBox {
    margin: 80px;
    position: relative;
    width: 400px;
    height: 400px;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform-origin: center center;
    transform: rotate(calc(var(--i) * calc(360deg / 50))) translate(150px) ;
    animation: colorChange 2.5s infinite;
    animation-delay: calc(var(--i) * 0.05s); 
}
@keyframes colorChange {
    0% {
        background: green; 
    }
    100% {
        background: #fff;
    }
}
</style>

 四、拓展与练习

1.圆环页面加载动画

•  最终效果

•  实现关键：关键帧动画

        在动画开始时，将圆形变大，利用人眼视觉的滞后性，即可实现圆环加载效果。 

@keyframes colorChange {
    0% {
        background: green; 
        width: 30px;
        height: 30px;
    }
    100% {
        background: #fff;

    }
}

• 代码实现

<template>
    <div>
        <div class="ringBox">
            <div v-for="(item, index) in 20" :key="index" class="circle" :style="{ '--i': index }"></div>
        </div>
    </div>
</template>
<style scoped>


.ringBox {
    margin: 80px;
    position: relative;
    width: 400px;
    height: 400px;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform-origin: center center;
    transform: rotate(calc(var(--i) * calc(360deg / 20))) translate(150px) ;
    animation: colorChange 2s infinite;
    animation-delay: calc(var(--i) * 0.1s); 
}
@keyframes colorChange {
    0% {
        background: green; 
        width: 30px;
        height: 30px;
    }
    100% {
        background: #fff;

    }
}
</style>

2.圆环颜色渐变效果

• 最终效果

• 实现关键：关键帧动画 

         由一个颜色渐变到另一个颜色，可多设置几个关键帧。

@keyframes colorChange {
    0% {
        background: green; 
        width: 30px;
        height: 30px;
    }
    100% {
        background: red;
        width: 0px;
        height: 0px;

    }
}

•  代码实现

<template>
    <div>
        <div class="ringBox">
            <div v-for="(item, index) in 20" :key="index" class="circle" :style="{ '--i': index }"></div>
        </div>
    </div>
</template>
<style scoped>
.ringBox {
    margin: 80px;
    position: relative;
    width: 400px;
    height: 400px;
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform-origin: center center;
    transform: rotate(calc(var(--i) * calc(360deg / 20))) translate(150px) ;
    animation: colorChange 2s infinite;
    animation-delay: calc(var(--i) * 0.1s); 
}
@keyframes colorChange {
    0% {
        background: green; 
        width: 30px;
        height: 30px;
    }
    100% {
        background: red;
        width: 0px;
        height: 0px;

    }
}
</style>

四、总结与思考

1. 动画的实现原理（人眼视觉的滞后性）

2.关键帧的使用

3.transform 变形函数的变换效果