有些东西对于代码层次来看毫无用处，但是你架不住甲方的喜欢，就是要有旋转效果
得，撸起袖子，淦
这是小编做的一个简单的效果， 接下来，咱花五分钟一步步做： first：先画运动轨迹（线条），和第一个球
`<div class="wrap>
<div class='plant'>
<div class='ball'>ball1</div>
</div>
</div>`
样式：
`<style>
.wrap {
display: flex;
background-image: url('./bg2.jpg');
background-size: cover;
width: 500px;
height: 500px;
align-items: center;
justify-content: center;
}
.planet {
position: absolute;
border: 2px solid #13c2c2;
width: 300px;
height: 300px;
}
.ball {
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
background-color: rgba(20, 12, 33, .5);
left: calc(50% - 25px);
top: -25px;
text-align: center;
line-height: 50px;
color: #13c2c2;
}
</style>`
效果：
分析：轨迹高宽为300px，小球大小为50px，所以定位于top-border的位置的坐标为left:（50% -25px）,top: -25px,用百分比的好处就是你可以根据需要修改轨迹的大小。
second： 旋转缩放轨迹,小球：
.planet {
transform-style: preserve-3d;
transform: scaleY(0.5) rotateZ(30deg);
border-radius: 50%;
}
.ball {
transform: rotateZ(-30deg) scaleY(2);
}
third：动起来
/* // 公转动画 */
@keyframes planet-rotate {
0% {
transform: rotate(30deg) scaleY(0.5) rotate(0); // 倾斜30度
}
100% {
transform: rotate(30deg) scaleY(0.5) rotate(360deg);
}
}
/* // 自转动画 */
@keyframes self-rotate {
0% {
transform: rotate(0) scaleY(2) rotate(-30deg);
}
100% {
transform: rotate(-360deg) scaleY(2) rotate(-30deg);
}
}
.planet {
animation: planet-rotate 16s linear infinite; // 无限次
}
.ball {
animation: self-rotate 16s linear infinite;
}
一个实现了，其它的就好办了，最简单的就是在第一次还没旋转轨迹的时候，把需要的小球定位好，附上最终代码
<style>
.wrap {
display: flex;
background-image: url('./bg2.jpg');
background-size: cover;
width: 500px;
height: 500px;
align-items: center;
justify-content: center;
}
.planet {
position: absolute;
border: 2px solid #13c2c2;
width: 300px;
height: 300px;
transform-style: preserve-3d;
transform: scaleY(0.5) rotateZ(30deg);
border-radius: 50%;
}
.ball {
width: 50px;
height: 50px;
position: absolute;
border-radius: 50%;
background-color: rgba(20, 12, 33, .5);
left: calc(50% - 25px);
top: -25px;
text-align: center;
line-height: 50px;
color: #13c2c2;
transform: rotateZ(-30deg) scaleY(2);
}
.second {
left: calc(50% + 125px);
top: 125px;
}
.third {
left: calc(50% - 25px);
top: 275px;
}
.four {
left: calc(50% - 175px);
top: 125px;
}
/* // 公转动画 */
@keyframes planet-rotate {
0% {
transform: rotate(30deg) scaleY(0.5) rotate(0);
}
100% {
transform: rotate(30deg) scaleY(0.5) rotate(360deg);
}
}
/* // 自转动画 */
@keyframes self-rotate {
0% {
transform: rotate(0) scaleY(2) rotate(-30deg);
}
100% {
transform: rotate(-360deg) scaleY(2) rotate(-30deg);
}
}
.planet {
animation: planet-rotate 16s linear infinite;
}
.ball {
animation: self-rotate 16s linear infinite;
}
</style>
</head>
<body>
<div id="app">
<div class='wrap'>
<div class='planet'>
<div class='ball'>ball1</div>
<div class='ball second'>ball2</div>
<div class='ball third'>ball3</div>
<div class='ball four'>ball4</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
}
},
methods: {
},
})
</script>
</body>
