环形旋转效果

若干张图片绕圈运动，图片自身不旋转
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>

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

相关阅读:
第一百六十一回 Sliver综合示例
Python图像处理丨图像的灰度线性变换
这也能造成故障？我只给DTO类加了一个属性
【API篇】七、Flink窗口
Mac系统下TestCafe初体验
Java 文本检索神器 "正则表达式"
7.5模拟赛总结
市场上ios签名公司做什么的？
8个提高摸鱼效率的python自动化脚本，提高打工人幸福感~
.NET C#基础（7）：接口 - 人如何和猫互动

原文地址：https://blog.csdn.net/W2001r/article/details/126336223