复制到本地HTML查看 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆形轨迹运动</title> <style> .container{ width: 300px; height: 300px; /*same size as the image */ outline: 1px solid black; margin: 0 auto; position: relative; margin-top: 160px; display: flex; justify-content: center; align-items: center; border-radius: 50%; animation: rotate linear infinite 20s; } .container .item{ width:80px; height: 80px; border-radius: 50%; overflow: hidden; position: absolute; } .container img{ width:100%; /*same size as the image */ height:100%; /*same size as the image */ object-fit: cover; /*same aspect ratio */ object-position: center; /*same size as the image */ animation: rotate 20s linear infinite reverse; /*same size as the image */ } @keyframes rotate { to { transform: rotate(360deg) } }/* Animation */ </style> </head> <body> <div class="container"> <div class="item"><img src="http://picslot.momen.vip/80x80" alt=""></div> <div class="item"><img src="http://picslot.momen.vip/80x80" alt=""></div> <div class="item"><img src="http://picslot.momen.vip/80x80" alt=""></div> </div> <script> const items = document.querySelectorAll('.item'); /*finds all div items */ const r = document.querySelector('.container').clientWidth / 2; const count = items.length; const pieceDeg = 360 / count; for (let i = 0; i < count; i++){ let t = i * pieceDeg; t = (Math.PI / 180) * t; const x = Math.sin(t) * r; y = -Math.cos(t) * r; console.log('x',x); items[i].style.transform = <code>translate(${x}px, ${y}px)</code>; } </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 圆形轨迹运动 喜欢 (1)or分享 (0)
