这种怎么让他沿着圆圈转起来呢，有什么css或者什么技术吗？该怎么切图呢，最好有个例子是最好的了，谢谢没有什么思路

图片沿着圆环的转动有什么方法吗？

2 个回答

得票最新

smallStone

472324

发布于
1 月 13 日湖北

更新于
1 月 13 日

✓ 已被采纳

我的建议直接让设计师做个GIF图贴进去最合适。。或者制作成雪碧图，通过css改变动态背景定位实现（https://segmentfault.com/a/1190000002620786）可以参考这个切成精灵图然后通过css控制背景位置即可，推荐使用这种方法。写了一个列子。你需要自己看开发者选项，把css剥离出来，大小自己更改一下。把圆环设置成黄色看看。效果：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css 3D 透视圆环</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#6366f1",
              secondary: "#4f46e5",
            },
            borderRadius: {
              none: "0px",
              sm: "2px",
              DEFAULT: "4px",
              md: "8px",
              lg: "12px",
              xl: "16px",
              "2xl": "20px",
              "3xl": "24px",
              full: "9999px",
              button: "4px",
            },
          },
        },
      }
    </script>
    <style>
      .ring-container {
        perspective: 1000px;
        perspective-origin: 50% 50%;
      }

      .ring {
        position: relative;
        width: 400px;
        height: 400px;
        transform-style: preserve-3d;
        animation: rotate 8s linear infinite;
      }
      .circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 10px solid;
        transform-style: preserve-3d;
      }

      @keyframes rotate {
        0% {
          transform: rotateX(60deg) rotateZ(0);
        }
        100% {
          transform: rotateX(60deg) rotateZ(360deg);
        }
      }

      .paused {
        animation-play-state: paused;
      }

      .circle:nth-child(1) {
        transform: translateZ(0px);
        border-color: rgba(42, 45, 173, 0.9);
      }
      .circle:nth-child(2) {
        transform: translateZ(20px);
        border-color: rgba(99, 102, 241, 0.8);
      }
      .circle:nth-child(3) {
        transform: translateZ(40px);
        border-color: rgba(99, 102, 241, 0.7);
      }
      .circle:nth-child(4) {
        transform: translateZ(60px);
        border-color: rgba(99, 102, 241, 0.6);
      }
      .circle:nth-child(5) {
        transform: translateZ(80px);
        border-color: rgba(99, 102, 241, 0.5);
      }
      .circle:nth-child(6) {
        transform: translateZ(100px);
        border-color: rgba(99, 102, 241, 0.4);
      }
      .circle:nth-child(7) {
        transform: translateZ(120px);
        border-color: rgba(99, 102, 241, 0.3);
      }
      .circle:nth-child(8) {
        transform: translateZ(140px);
        border-color: rgba(99, 102, 241, 0.2);
      }
    </style>
  </head>
  <body
    class="min-h-[1024px] bg-gray-900 flex flex-col items-center justify-center"
  >
    <div class="text-center mb-12">
      <h1 class="text-4xl font-bold text-white mb-4">3D 透视圆环展示</h1>
    </div>

    <div class="ring-container">
      <div class="text-center text-white">我是三角形</div>
      <div class="ring" id="ring">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>
  </body>
</html>