又一个不太理解的动画效果,就当练习了
<template>
<div class="mainrouter"
style="background-color: rgb(117, 115, 241);display: flex;justify-content: center;align-items: center;">
<div class="yvan">
<div class="yvan-nei" v-for="(item,index) in 36" :key="index"></div>
</div>
</div>
</template>
<style lang="scss">
$x: 300px;
$y: 300px;
$x2: 20px;
$y2: 20px;
// 小球的数量
$num: 36;
// 小球旋转角度
$PDeg: 360deg/$num;
// 运动时间
$duration: 2s;
.yvan {
width: $x;
height: $y;
border-radius: 50%;
// border: 1px solid white;
position: relative;
.yvan-nei {
width: $x2;
height: $y2;
// background: red;
position: absolute;
left: $x/2-$x2/2px;
// 设置旋转半径
transform-origin: center $x/2 + $x2/2;
top: (-$y2/2);
// 设置
// 设置井深
perspective: 80px;
//
transform-style: preserve-3d;
@for $i from 1 through $num {
&:nth-child(#{$i}) {
transform: rotate(($i+1)*$PDeg);
// 设置动画延迟时间
&::before,
&::after {
animation-delay: -$duration / $num *($i - 1) *6;
}
}
}
&::before,
&::after {
content: '';
display: block;
width: inherit;
height: inherit;
border-radius: 50%;
position: absolute;
}
&::before {
background: black;
top: -100%;
animation: router-black $duration infinite; //linear匀速 infinite无限重复
// 黑球运动动画,只看一个黑球的移动轨迹,发现是在3d上进行
// 先沿着x轴正方向移动100%,然后沿着y轴正方向移动200%,最后回到原点
@keyframes router-black {
0% {
// 运动时间曲线
animation-timing-function: ease-in;
}
25% {
transform: translate3d(0, 100%, $x2);
animation-timing-function: ease-out;
}
50% {
transform: translate3d(0, 200%, 0);
animation-timing-function: ease-in;
}
75% {
transform: translate3d(0, 100%, -$x2);
animation-timing-function: ease-out;
}
}
}
&::after {
background: white;
top: 100%;
animation: router-white $duration linear infinite;
// 白球运动动画,只看一个黑球的移动轨迹,发现是在3d上进行
@keyframes router-white {
0% {
animation-timing-function: ease-in;
}
25% {
transform: translate3d(0, -100%, -$x2);
animation-timing-function: ease-out;
}
50% {
transform: translate3d(0, -200%, 0);
animation-timing-function: ease-in;
}
75% {
transform: translate3d(0, -100%, $x2);
animation-timing-function: ease-out;
}
}
}
}
}
</style>