下面这个光圈怎么才能滚动，前端

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

@JCat_李小黑 和 @乓乓 的建议放一起就好了
用这个做例子https://codepen.io/Ariex/pen/...，给.progress-container加个样式transform:perspective(50px) scaleY(0.45) rotate(0deg);

Answer 2

让ui换动态给你，硬气点。。。

另：常见的让图动起来的方法
1.css3的旋转
2.canvas 自己画图
3.js让图片旋转

以上，我觉得3种针对你这个又椭圆又复杂的图我觉得都不可以作到，别想了，让ui给你gif的图，微笑。。

Answer 3

    图片id：#raidImg
        #raidImg{
                animation: mymove 5s infinite;
                animation-timing-function: linear;
                -webkit-animation: mymove 5s infinite linear;
            }
            @keyframes mymove{
                0% {
                    transform: perspective(500px) scaleY(.15) rotate(0deg);
                }
                
                100% {
                    transform: perspective(500px) scaleY(.15) rotate(2turn);
                }
            }

Answer 4

css3可以做到
让一个元素倾斜然后绕Y轴旋转即可

贴到body里即可

<style>
  .ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #4fabda;
    position: relative;
    animation: roll 2s linear infinite;
    transform-origin: 50% 50%;
  }

  .ring:before {
    content: '';
    height: 1px;
    position: absolute;
    top: 50%;
    width: 100%;
    background-color: #000;
  }

  .box {
    transform-style: preserve-3d;
    perspective: 1000px;
  }

  @keyframes roll {
    from {
      transform: rotateX(60deg) rotateY(10deg) rotateZ(0);
    }
    to {
      transform: rotateX(60deg) rotateY(10deg) rotateZ(360deg);
    }
  }
</style>
<div class="box">
  <div class="ring"></div>
</div>