如图所示,圆圈绕着转圈,本来可以用相对定位,但奈何要做成圆圈数量不固定,那就意味位置不能固定,需要计算。还是用offset偏移比较简单。
offset-path:偏移轨迹
用svg算出圆形:path("M ${width}, ${width / 2} m -0, 0 a -${width / 2},-${width / 2} 0 1,0 -${width},0 a ${width / 2},${width / 2} 0 1,0 ${width},0")
width为绕圈的宽度
offset-distance:偏移角度
由于轨迹是个圆圈,紧贴着圆圈偏移,小圆整个模块会旋转,所以需要额外加transform转正
// html
<div class="circle-surround">
<div v-for="(item, index) in circleList" :key="index" class="circle-item">
<div class="circle-box">
<p class="circle-item__number">{{ item.number }}</p>
<p class="circle-item__name">{{ item.name }}</p>
</div>
</div>
</div>
// css
.circle-item{
width: 7rem;
height: 7rem;
position: absolute;
z-index: 1;
background-image: radial-gradient(farthest-corner, transparent, transparent, #8BB1FF);;
border-radius: 50%;
top: 50%;
left: 50%;
&__number{
color: #FFE454;
font-size: 1.25rem;
font-weight: bold;
}
.circle-surround{
z-index: 10;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: surround 20s linear infinite;
}
@keyframes surround{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
最重要的开始计算圆圈数量、偏移角度以及需要的转正正度
mounted() {
this.$nextTick(() => {
// 外框宽高
const width = document.getElementsByClassName('circle-frame')[0].offsetWidth - 100 || 600;
// 循环圆圈个数
this.circleList.forEach((item, index) => {
// 偏移角度
const rotate = 90 + (360 / this.circleList.length * index);
// 添加圆圈动画
document.styleSheets[0].insertRule(`
@-webkit-keyframes ani${index}{ from{ transform:rotateZ(${rotate}deg) } to { transform:rotateZ(${(rotate) - 360}deg) }}
`, 0);
document.styleSheets[0].insertRule(`
@keyframes ani${index}{ from{ transform:rotateZ(${rotate}deg) } to { transform:rotateZ(${(rotate) - 360}deg) }}
`, 0);
const circleItem = document.getElementsByClassName('circle-item')[index];
circleItem.setAttribute('style', `
animation:ani${index} 20s linear infinite;
-webkit-animation:ani${index} 20s linear infinite;
offset-distance:${(100 / this.circleList.length).toFixed(1) * index}%;
transform: rotateZ(${rotate}deg);
margin-left: -${width / 2}px;
margin-top: -${width / 2}px;
offset-path: path("M ${width}, ${width / 2} m -0, 0 a -${width / 2},-${width / 2} 0 1,0 -${width},0 a ${width / 2},${width / 2} 0 1,0 ${width},0");
`);
});
});
},