本案例中借助了第三方动画插件animejs,其实借助的话同样也是可以实现的，就是自己最近刚好再使用这个插件，最算是加深熟悉吧。在这里我也想大家推荐这个插件官网，真的内nice
直接上代码，代码中的anime.min.js文件可以下载官网的，也可以找找其他的cdn，都可以的。本文代码是最最最冗余版，还没有简化，大家看了别笑话啊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星球运动</title>
<script src="../animeJs/scripts/anime.min.js"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: relative;
width: 1000px;
height: 1000px;
}
.item1 {
position: absolute;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
background: turquoise;
border-radius: 50%;
}
.item2 {
position: absolute;
width: 40px;
height: 40px;
top: -20px;
left: -20px;
background: rgb(24, 67, 146);
border-radius: 50%;
}
.item3 {
position: absolute;
width: 20px;
height: 20px;
top: -10px;
left: -10px;
background: rgb(5, 197, 30);
border-radius: 50%;
}
.item4 {
position: absolute;
width: 30px;
height: 30px;
top: -15px;
left: -15px;
background: rgb(164, 11, 202);
border-radius: 50%;
}
.item5 {
position: absolute;
width: 60px;
height: 60px;
top: -30px;
left: -30px;
background: rgb(204, 9, 52);
border-radius: 50%;
}
.item6 {
position: absolute;
width: 15px;
height: 15px;
top: -7.5px;
left: -7.5px;
background: rgb(177, 151, 5);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<g id="Layer_1">
<ellipse stroke="#000" fill="transparent" stroke-width="2" cx="336" cy="274" id="svg_1" rx="44"
ry="44" />
<ellipse stroke="#000" fill="transparent" stroke-width="2" cx="346" cy="281" id="svg_2" rx="102"
ry="91" />
<ellipse stroke="#000" fill="transparent" stroke-width="2" cx="349.5" cy="283.5" id="svg_3" rx="191.5"
ry="159.5" />
<ellipse stroke="#000" fill="transparent" stroke-width="2" cx="355" cy="291" id="svg_4" rx="237"
ry="198" stroke-dasharray="5,5" />
<ellipse stroke="#000" fill="transparent" stroke-width="2" stroke-dasharray="5,5" cx="352.5" cy="318.5"
id="svg_5" rx="306.5" ry="263.5" />
</g>
</svg>
</div>
</body>
<script>
var path1 = anime.path('.container svg #svg_1');
var path2 = anime.path('.container svg #svg_2');
var path3 = anime.path('.container svg #svg_3');
var path4 = anime.path('.container svg #svg_4');
var path5 = anime.path('.container svg #svg_5');
var path6 = anime.path('.container svg #svg_6');
const demo1=anime({
targets: '.container .item1',
translateX: path1('x'),
translateY: path1('y'),
rotate: path1('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
const demo2=anime({
targets: '.container .item2',
translateX: path2('x'),
translateY: path2('y'),
rotate: path2('angle'),
easing: 'linear',
duration: 5000,
loop: true
});
const demo3=anime({
targets: '.container .item3',
translateX: path3('x'),
translateY: path3('y'),
rotate: path3('angle'),
easing: 'linear',
duration: 10000,
loop: true
});
const demo4=anime({
targets: '.container .item4',
translateX: path4('x'),
translateY: path4('y'),
rotate: path4('angle'),
easing: 'linear',
duration: 4000,
loop: true
});
const demo5=anime({
targets: '.container .item5',
translateX: path5('x'),
translateY: path5('y'),
rotate: path5('angle'),
easing: 'linear',
duration: 6000,
loop: true
});
const demo6=anime({
targets: '.container .item6',
translateX: path6('x'),
translateY: path6('y'),
rotate: path6('angle'),
easing: 'linear',
duration: 5500,
loop: true
});
</script>
</html>
