整体思路

创建n个div盒子；
定义盒子的样式；
给每个盒子设置style；
css中设置盒子宽度（使用变量*px得到宽度）；
再设置子元素垂直水平居中；
再次回到css子盒子中：将所有元素绕x轴旋转70度（别杠，自己可以修改旋转度数，看个人喜好）；
预设动画；
定义动画帧使用@keyframes{

};

给每个子元素设置不同的延时时间；
根据变量设置每个元素延时时间；、
最后一步，添加阴影（可添可不添）

考察

关于css动画属性的使用以及动画效果的开启；定义动画帧；旋转特效；给变量设置延时时间等小知识点，个人感觉动态效果实现之前，要弄清楚思路和分析思路，能够做到：“简单的动画特效不一定简单，复杂的动画不一定复杂”；思路就已经很清晰明了了。

代码

code.juejin.cn/pen/7238844…

源码可copy

   <div class="containers">

    <div class="item" style="--i:0"></div>
    <div class="item" style="--i:1"></div>
    <div class="item" style="--i:2"></div>
    <div class="item" style="--i:3"></div>
    <div class="item" style="--i:4"></div>


    <div class="item" style="--i:5"></div>
    <div class="item" style="--i:6"></div>
    <div class="item" style="--i:7"></div>
    <div class="item" style="--i:8"></div>
    <div class="item" style="--i:9"></div>

    <div class="item" style="--i:10"></div>

    </div>
    ----------------分割线css----------------------
<p align=center>    .containers{</p>

<p align=center>position: relative;</p>
<p align=center>display: flex;</p>
<p align=center>justify-content: center;</p>
<p align=center>align-items: center;</p>
<p align=center>top: 400px;</p>
<p align=center>}</p>


<p align=center>.item{</p>
<p align=center>position: absolute;</p>
<p align=center>background-color: transparent;</p>
<p align=center>width: calc(var(--i) \* 25px);</p>
<p align=center>aspect-ratio: 1;</p>
<p align=center>border: 10px solid blueviolet;</p>
<p align=center>border-radius: 50%;</p>

<p align=center>transform: rotateX(70deg);</p>

<p align=center>animation: move 3s ease-in-out infinite;</p>
<p align=center>}</p>

<p align=center>@keyframes move{</p>
<p align=center>0% ,100%{</p>

<p align=center>transform:rotateX(70deg) translateY(0px);</p>
<p align=center>filter:hue-rotate(0deg);</p>
<p align=center>}</p>
<p align=center>50%{</p>
<p align=center>transform:rotateX(70deg) translateY(-35vw);</p>
<p align=center>filter:hue-rotate(180deg);</p>
<p align=center>}</p>

<p align=center>}</p>

<p align=center>.item{</p>
<p align=center>animation: move</p>
<p align=center>3s</p>
<p align=center>ease-in-out</p>

<p align=center>calc(var(--i)*0.08s)</p>
<p align=center>infinite</p>
<p align=center>;</p>

<p align=center>box-shadow: 0px 0px 15px rgb(124, 124, 124),</p>
<p align=center>inset 0px 0px 15px rgb(124, 124, 124);</p>
<p align=center>}</p>

关于css小动画--css弹簧效果

整体思路

考察

代码

源码可copy