环形旋转效果

小木荣

已于 2022-08-14 21:05:57 修改

阅读量358

点赞数

分类专栏： web前端文章标签： css3 前端 css

于 2022-08-14 20:58:21 首次发布

本文链接：https://blog.csdn.net/w2001r/article/details/126336223

版权

web前端专栏收录该内容

10 篇文章 2 订阅

订阅专栏

若干张图片绕圈运动，图片自身不旋转
animate transform translate rotate
在这里插入图片描述

<!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>
    <style>
      .container {
        margin: 200px auto;
        width: 300px;
        height: 300px;
        border: 1px solid black;
        border-radius: 1000px;
        position: relative;
        /* 动画 无限次匀速旋转以10s为周期 */
        animation: rotate linear 10s infinite;
      }
      .container .item {
        top: 100px;
        left: 100px;
        position: absolute;
      }
      img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        /* 图片相反旋转，保持静止 */
        animation: rotate linear 10s infinite reverse;
      }
      @keyframes rotate {
        /* 顺时针旋转360deg */
        0%{transform: rotate(0);}
        100%{transform: rotate(360deg);}
        /* 逆时针旋转360deg */
        /* 0%{transform: rotate(360deg);} */

      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"><img src="./baiye/1 (1).png" alt="" /></div>
      <div class="item"><img src="./baiye/1 (2).png" alt="" /></div>
      <div class="item"><img src="./baiye/1 (3).png" alt="" /></div>
      <div class="item"><img src="./baiye/1 (1).jfif" alt="" /></div>
      <div class="item"><img src="./baiye/1 (1).jpg" alt="" /></div>
    </div>
    <script>
      // 获取目标，半径，数量，平均度数的十进制
      const items = document.querySelectorAll(".container .item");
      const r = document.querySelector(".container").clientWidth / 2;
      const count = items.length;
      const pieceDeg = 360 / count;
      for (let i = 0; i < count; i++) {
        //  t一开始是每个旋转的角度的十进制，后一步单位转化为deg
        let t = i * pieceDeg;
        t = t * (Math.PI / 180);
        // 获取xy坐标（注意y在电脑上相反）
        const x = Math.sin(t) * r;
        const y = -Math.cos(t) * r;
        // 设置css
        items[i].style.transform = `translate(${x}px,${y}px)`;
      }
    </script>
  </body>
</html>