前言
C端的介绍页中，设计师设计动画特效都非常有意思。这次遇到了“表盘内容元素环绕效果”，类似于表盘中的分针在一格一格运动一样，只是这次动画运动的元素不一样。
效果如下：
实现表盘布局
合理的运用JavaScrip的三角函数，通过逐个定位元素即可实现表盘布局， 但后续的交互写起来会比较繁琐。而借助CSS的transform-origin则可以非常简单的实现表盘布局。
transform-originCSS 属性让你更改一个元素变形的原点。`
我们只需要把子元素中的原点设置到父元素的中心点上，然后依次旋转相对应的角度transform: rotate(#{$i * 360 / 12}deg)，即可完成一个表盘布局。
基础样式
<ul><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li><li><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></li>
</ul>
ul {width: 800px;height: 800px;background-color: rgb(206, 206, 206);border-radius: 50%;@for $i from 1 through 12 {li:nth-child(#{$i}) {transform: rotate(#{$i * 360 / 12}deg);}}li {width: 100px;height: 100px;border-radius: 50%;overflow: hidden;border: 2px solid orange;box-sizing: border-box;position: absolute;top: 350px;transform-origin: 400px;img {width: 100%;height: 100%;object-fit: cover;}}
}
再中和一下子元素的旋转角度，内容反方向自旋回子元素的角度，让内容“正”起来
img {transform: rotate(#{-$i * 360 / 12}deg);
}
实现表盘内容元素环绕效果
元素环绕效果的实现本质也是各元素旋转再中和。以上面的代码为基础，我们让父元素旋转的同时，子元素内容反方向旋转子元素+父元素的旋转角度
- 父元素每秒顺时针旋转30deg
<ul :style="{ transform: `rotate(${rotateNum}deg)` }">...
</ul>
setInterval(() => {this.rotateNum += 30
}, 1000)
- 调整一下子元素的旋转角度始点，让第一个元素为
index === 1的元素，即让第一个旋转角度为360deg即可。
<liv-for="index in 12":key="index":style="{transform: `rotate(${(13 - index) * 30}deg)`,}"
>...
</li>
- 中和一下子元素+父元素的旋转角度，让内容“正”起来。同时加上和父元素一样时间的
transition
<li><divclass="content":style="{transform: `rotate(${-(13 - index) * 30 - rotateNum}deg)`}":data-text="index"><img src="https://s1.ax1x.com/2022/12/08/zRik24.jpg" alt="" /></div>
</li>
ul {transition: transform 0.5s linear;...li {.content {transition: transform 0.5s linear;}}
}
- 最后加上
onmouseover、onmouseleave实现鼠标悬停和离开时，暂停/开始环绕功能。再从9377某落地页上偷一套样式装饰一下。
最后
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
