思路:JS计算每个元素的初始位置、CSS控制动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden;
}
.rotate { width: 600px; height: 600px; border: 2px solid #ccc; border-radius: 50%; position: relative; /* 容器正向旋转 */ animation: rotate 20s linear infinite; }
.rotate .item { width: 150px; height: 150px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.rotate .item img { width: 100%; height: 100%; /* 图片反向旋转,抵消容器正向旋转 */ animation: rotate 20s linear infinite reverse; }
@keyframes rotate { to { transform: rotate(360deg); } } </style>
<body>
<div class="rotate"> <div class="item"> <img src="./imgs/KRtDLD_Ultra_Sword_Ability_Star_artwork.png" alt=""> </div> <div class="item"> <img src="./imgs/KRtDLD_Monster_Flame_Ability_Star_artwork.png" alt=""> </div> <div class="item"> <img src="./imgs/KRtDLD_Flare_Beam_Ability_Star_artwork.png" alt=""> </div> <div class="item"> <img src="./imgs/KRtDLD_Snow_Bowl_Ability_Star_artwork.png" alt=""> </div> <div class="item"> <img src="./imgs/KRtDLD_Grand_Hammer_Ability_Star_artwork.png" alt=""> </div> </div>
<script> const container = document.querySelector('.rotate') const imgs = document.querySelectorAll('.item')
// 图片数量 const count = imgs.length
// 半径 const r = container.clientWidth / 2
// 均分角度 const averageDeg = 360 / count
for (let i = 0; i < count; i++) { // 实际角度 let deg = averageDeg * i
// 弧度 let rad = deg * Math.PI / 180
// 计算相对于圆心的坐标x,y let x = Math.sin(rad) * r, y = -Math.cos(rad) * r
imgs[i].style.transform = `translate(calc(-50% + ${x}px), calc(-50% + ${y}px))` } </script> </body>
</html>
|
![](/img/loading.gif)