环形工艺旋转器，环周围具有渐变渐变效果

Question

我想用CSS3或JavaScript创建一个环形的进程旋转器，类似于Android中的加载进度旋转器。

旋转器应连续旋转并填充纯色，并沿边缘逐渐淡出（即圆锥形渐变），如下图所示：

我怎样才能实现这个目标？

Answer 1

如果只有 CSS 或 SVG 具有圆锥渐变，这将非常简单！在

conic-gradient()

符号成熟并获得支持之前，我们可以通过切割渐变并以某种方式覆盖接缝来近似效果。

下面您将找到两种解决方案。第一个解决方案使用嵌入的SVG图像；第二个使用多个 CSS 渐变和伪元素。

两者都以单个

div

开始，并应用关键帧动画使其旋转：

HTML：

<div class="spinner"></div>

CSS：

@keyframes rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.spinner {
    animation: rotate 1s linear infinite;
    height: 200px;
    width: 200px;
}

如果您愿意，可以使用

progress

元素，但您会发现样式很痛苦。另请注意，除非您使用类似 prefixfree.js 的内容，否则您需要添加

@keyframes

at 规则以及

transform

和

animation

属性的供应商前缀版本。

SVG 解决方案

@keyframes rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.spinner {
    animation: rotate 1s linear infinite;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwLDAgMjAwLDIwMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJyaW5nIj48cGF0aCBkPSJNMjAwLDEwMEExMDAsMTAwLDAsMSwxLDE5Ny44MSw3OS4yMUwxODguMDMsODEuMjlBOTAsOTAsMCwxLDAsMTkwLDEwMHoiLz48L2NsaXBQYXRoPjxmaWx0ZXIgaWQ9ImJsdXIiIHg9IjAiIHk9IjAiPjxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlR3JhcGhpYyIgc3RkRGV2aWF0aW9uPSIzIiAvPjwvZmlsdGVyPjxwYXRoIGlkPSJwIiBkPSJNMjUwLDEwMEExNTAsMTUwLDAsMCwxLDI0Ni43MiwxMzEuMTlMMTAwLDEwMEEwLDAsMCwwLDAsMTAwLDEwMHoiIGZpbGw9ImN5YW4iLz48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI3JpbmcpIj48ZyBmaWx0ZXI9InVybCgjYmx1cikiIHRyYW5zZm9ybT0icm90YXRlKC02IDEwMCAxMDApIj48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9IjAiIHRyYW5zZm9ybT0icm90YXRlKDAgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii4wMyIgdHJhbnNmb3JtPSJyb3RhdGUoMTIgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii4wNyIgdHJhbnNmb3JtPSJyb3RhdGUoMjQgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii4xIiB0cmFuc2Zvcm09InJvdGF0ZSgzNiAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjE0IiB0cmFuc2Zvcm09InJvdGF0ZSg0OCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjE3IiB0cmFuc2Zvcm09InJvdGF0ZSg2MCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjIiIHRyYW5zZm9ybT0icm90YXRlKDcyIDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuMjQiIHRyYW5zZm9ybT0icm90YXRlKDg0IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuMjgiIHRyYW5zZm9ybT0icm90YXRlKDk2IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuMzEiIHRyYW5zZm9ybT0icm90YXRlKDEwOCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjM0IiB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii4zOCIgdHJhbnNmb3JtPSJyb3RhdGUoMTMyIDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuNDEiIHRyYW5zZm9ybT0icm90YXRlKDE0NCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjQ1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTYgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii40OCIgdHJhbnNmb3JtPSJyb3RhdGUoMTY4IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuNTIiIHRyYW5zZm9ybT0icm90YXRlKDE4MCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjU1IiB0cmFuc2Zvcm09InJvdGF0ZSgxOTIgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii41OSIgdHJhbnNmb3JtPSJyb3RhdGUoMjA0IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuNjIiIHRyYW5zZm9ybT0icm90YXRlKDIxNiAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjY2IiB0cmFuc2Zvcm09InJvdGF0ZSgyMjggMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii42OSIgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuNyIgdHJhbnNmb3JtPSJyb3RhdGUoMjUyIDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuNzIiIHRyYW5zZm9ybT0icm90YXRlKDI2NCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjc2IiB0cmFuc2Zvcm09InJvdGF0ZSgyNzYgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii43OSIgdHJhbnNmb3JtPSJyb3RhdGUoMjg4IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuODMiIHRyYW5zZm9ybT0icm90YXRlKDMwMCAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iLjg2IiB0cmFuc2Zvcm09InJvdGF0ZSgzMTIgMTAwIDEwMCkiLz48dXNlIHhsaW5rOmhyZWY9IiNwIiBmaWxsLW9wYWNpdHk9Ii45MyIgdHJhbnNmb3JtPSJyb3RhdGUoMzI0IDEwMCAxMDApIi8+PHVzZSB4bGluazpocmVmPSIjcCIgZmlsbC1vcGFjaXR5PSIuOTciIHRyYW5zZm9ybT0icm90YXRlKDMzNiAxMDAgMTAwKSIvPjx1c2UgeGxpbms6aHJlZj0iI3AiIGZpbGwtb3BhY2l0eT0iMSIgdHJhbnNmb3JtPSJyb3RhdGUoMzQ4IDEwMCAxMDApIi8+PC9nPjwvZz48L3N2Zz4=') no-repeat;
    height: 200px;
    width: 200px;
}

<div class="spinner"></div>

已在 IE 10、Chrome 和 Firefox 中测试并运行。

注意事项

更改环的内半径或外半径比您想象的更痛苦，因为它需要编辑剪辑路径值。解释如何计算它超出了这个答案的范围，但足以说明它需要一些几何知识。如果有时间，我会尝试在 GitHub 上放置一个生成器。

SVG 版本如何工作

那一大堆乱码只是一个 Base64 编码的 SVG 图像。通过 Base64 解码器运行它，您将看到原始的 SVG 图像。

这是完整的图像，经过很好的缩进和注释，这样您就可以准确地看到它是如何工作的：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0 200,200">
    <defs>

        <!-- Ring shape centred on 100, 100 with inner radius 90px, outer
             radius 100px and a 12 degree gap at 348. -->
        <clipPath id="ring">
            <path d="M 200, 100
                     A 100, 100, 0, 1, 1, 197.81, 79.21
                     L 188.03, 81.29
                     A 90, 90, 0, 1, 0, 190, 100 z"/>
        </clipPath>

        <!-- Very simple Gaussian blur, used to visually merge sectors. -->
        <filter id="blur" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
        </filter>

        <!-- A 12 degree sector extending to 150px. -->
        <path id="p" d="M 250, 100
                        A 150, 150, 0, 0, 1, 246.72, 131.19
                        L 100, 100
                        A 0, 0, 0, 0, 0, 100, 100 z" fill="cyan"/>
    </defs>

    <!-- Clip the blurred sectors to the ring shape. -->
    <g clip-path="url(#ring)">

        <!-- Blur the sectors together to make a smooth shape and rotate
             them anti-clockwise by 6 degrees to hide the seam where the
             fully opaque sector blurs with the fully transparent one. -->
        <g filter="url(#blur)" transform="rotate(-6 100 100)">

            <!-- Each successive sector increases in opacity and is rotated
                 by a further 12 degrees. -->
            <use xlink:href="#p" fill-opacity="0"    transform="rotate(  0 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.03" transform="rotate( 12 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.07" transform="rotate( 24 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.1"  transform="rotate( 36 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.14" transform="rotate( 48 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.17" transform="rotate( 60 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.2"  transform="rotate( 72 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.24" transform="rotate( 84 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.28" transform="rotate( 96 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.31" transform="rotate(108 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.34" transform="rotate(120 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.38" transform="rotate(132 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.41" transform="rotate(144 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.45" transform="rotate(156 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.48" transform="rotate(168 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.52" transform="rotate(180 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.55" transform="rotate(192 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.59" transform="rotate(204 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.62" transform="rotate(216 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.66" transform="rotate(228 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.69" transform="rotate(240 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.7"  transform="rotate(252 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.72" transform="rotate(264 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.76" transform="rotate(276 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.79" transform="rotate(288 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.83" transform="rotate(300 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.86" transform="rotate(312 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.93" transform="rotate(324 100 100)"/>
            <use xlink:href="#p" fill-opacity="0.97" transform="rotate(336 100 100)"/>
            <use xlink:href="#p" fill-opacity="1"    transform="rotate(348 100 100)"/>
        </g>
    </g>
</svg>

这是缩小的，Base64 编码并用作内联 CSS 背景图像。如果您愿意，也可以将其作为单独的文件提供。从技术上讲，应该可以在不使用 Base64 编码的情况下嵌入图像，但目前仅适用于 Chrome。

纯 CSS 解决方案

该解决方案在每个象限中使用单独的线性渐变，并依靠视觉相似性来掩盖接缝。环形是使用伪元素形成的。

@keyframes rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.spinner {
    animation: rotate 1s linear infinite;
    background: cyan;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    position: relative;
}

.spinner::before,
.spinner::after {
    content: '';
    position: absolute;
}

.spinner::before {
    border-radius: 50%;
    background:
        linear-gradient(0deg,   hsla(0, 0%, 100%, 1  ) 50%, hsla(0, 0%, 100%, 0.9) 100%)   0%   0%,
        linear-gradient(90deg,  hsla(0, 0%, 100%, 0.9)  0%, hsla(0, 0%, 100%, 0.6) 100%) 100%   0%,
        linear-gradient(180deg, hsla(0, 0%, 100%, 0.6)  0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
        linear-gradient(360deg, hsla(0, 0%, 100%, 0.3)  0%, hsla(0, 0%, 100%, 0  ) 100%)   0% 100%
    ;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
}

.spinner::after {
    background: white;
    border-radius: 50%;
    top: 3%;
    bottom: 3%;
    left: 3%;
    right: 3%;
}

<div class="spinner"></div>

已在 IE 10、Chrome 和 Firefox 中测试并运行。

注意事项

与 SVG 解决方案不同，这仅适用于纯色背景。如果你想改变那个颜色，还需要修改几个地方，这是一个痛苦。

纯 CSS 版本如何工作

.spinner { background: cyan; border-radius: 50%; /* ... */ }
.spinner { /* ... */ position: relative; } .spinner::before, .spinner::after { content: ''; position: absolute; }
:before
伪元素的每个象限都设置为不同的线性渐变，从不透明的白色开始，逐渐变得越来越透明。朝向中心，很容易看到渐变连接的位置，但请注意外部周围的颜色足够接近，以至于它们看起来平滑连接。
.spinner::before { border-radius: 50%; background: linear-gradient(0deg, hsla(0, 0%, 100%, 1 ) 50%, hsla(0, 0%, 100%, 0.9) 100%) 0% 0%, linear-gradient(90deg, hsla(0, 0%, 100%, 0.9) 0%, hsla(0, 0%, 100%, 0.6) 100%) 100% 0%, linear-gradient(180deg, hsla(0, 0%, 100%, 0.6) 0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%, linear-gradient(360deg, hsla(0, 0%, 100%, 0.3) 0%, hsla(0, 0%, 100%, 0 ) 100%) 0% 100% ; background-repeat: no-repeat; background-size: 50% 50%; top: -1px; bottom: -1px; left: -1px; right: -1px; }
```
它的位置使其稍微
```
超过
旋转器的边缘，因为如果我们将其放置在边缘的右侧，则可以看到背景颜色的微弱边缘。
::after
伪元素隐藏中间位以形成环形：
.spinner::after { background: white; border-radius: 50%; top: 3%; bottom: 3%; left: 3%; right: 3%; }

瞧瞧！

Answer 2

.loader {
  --border-width: 10px;
  
  height: 200px;
  width: 200px;
  border-radius: 50%;
  
  /* 0.5px's are needed to avoid hard-stopping */
  --mask: radial-gradient(
    farthest-side, 
    transparent calc(100% - var(--border-width) - 0.5px), 
    #000 calc(100% - var(--border-width) + 0.5px)
  );
  -webkit-mask: var(--mask);
          mask: var(--mask);
          
  /* we're using two half linear-gradient which is masked by the radial-gradient */
  background: linear-gradient(to top, rgba(0,255,226, 1), rgba(0,255,226, 0.5)) 100% 0/50% 100% no-repeat,
              linear-gradient(rgba(0,255,226, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader"></div>

这是我的答案与@Jordan Gray 通过将背景设置为正文的答案的比较：

@乔丹·格雷的回答：

body {
  background: pink;
}

@keyframes rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

.spinner {
    animation: rotate 1s linear infinite;
    background: cyan;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    position: relative;
}

.spinner::before,
.spinner::after {
    content: '';
    position: absolute;
}

.spinner::before {
    border-radius: 50%;
    background:
        linear-gradient(0deg,   hsla(0, 0%, 100%, 1  ) 50%, hsla(0, 0%, 100%, 0.9) 100%)   0%   0%,
        linear-gradient(90deg,  hsla(0, 0%, 100%, 0.9)  0%, hsla(0, 0%, 100%, 0.6) 100%) 100%   0%,
        linear-gradient(180deg, hsla(0, 0%, 100%, 0.6)  0%, hsla(0, 0%, 100%, 0.3) 100%) 100% 100%,
        linear-gradient(360deg, hsla(0, 0%, 100%, 0.3)  0%, hsla(0, 0%, 100%, 0  ) 100%)   0% 100%
    ;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
}

.spinner::after {
    background: white;
    border-radius: 50%;
    top: 3%;
    bottom: 3%;
    left: 3%;
    right: 3%;
}

<div class="spinner"></div>

我的回答：

body {
  background: pink;
}

.loader {
  --border-width: 10px;
  
  height: 200px;
  width: 200px;
  border-radius: 50%;
  
  /* 0.5px's are needed to avoid hard-stopping */
  --mask: radial-gradient(
    farthest-side, 
    transparent calc(100% - var(--border-width) - 0.5px), 
    #000 calc(100% - var(--border-width) + 0.5px)
  );
  -webkit-mask: var(--mask);
          mask: var(--mask);
          
  /* we're using two half linear-gradient which is masked by the radial-gradient */
  background: linear-gradient(to top, rgba(0,255,226, 1), rgba(0,255,226, 0.5)) 100% 0/50% 100% no-repeat,
              linear-gradient(rgba(0,255,226, 0.5) 50%, transparent 95%) 0 0/50% 100% no-repeat;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="loader"></div>

Answer 3

div {
  margin: 0 auto;
  margin-top: 3rem;
}

.spnr {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  border: 5px solid transparent;
  animation: spin 1s linear infinite;

  background: linear-gradient(white, white), conic-gradient(from 0.15turn, white, #00EBD3);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="spnr"></div>

更多变化：

:root {
  --bg: white;
  --wbg: linear-gradient(var(--bg), var(--bg));
}

.dark>div {
  --bg: black;
  --wbg: linear-gradient(var(--bg), var(--bg));
}

.dark {
  background: black;
}

div {
  display: inline-block;
  margin: 0 1rem;
  margin-top: 0.5rem;
  height: 200px;
}

.one {
  background: var(--wbg), conic-gradient(from 0.15turn, transparent, #00EBD3);
}

.two {
  background: var(--wbg), conic-gradient(from 0.15turn, transparent, transparent, #00EBD3);
}

.three {
  background: var(--wbg), conic-gradient(from 0.15turn, transparent 0.0turn, transparent .04turn, pink 0.49turn, pink 0.5turn, transparent 0.50turn, transparent 0.55turn, pink 0.99999turn);
}

.four {
  background: var(--wbg), conic-gradient(from 0.25turn, transparent 0.0turn, darkgreen, transparent, darkgreen, transparent, darkgreen, transparent, darkgreen, transparent);
}

.five {
  background: var(--wbg), conic-gradient(from 0.25turn, transparent 0.0turn, red 0.125turn, transparent 0.125turn, red .25turn, transparent .25turn, red 0.375turn, transparent .375turn, red 0.5turn, transparent .5turn, red 0.625turn, transparent .625turn, red 0.75turn, transparent .75turn, red 0.875turn, transparent .875turn, red 1turn, transparent 1turn);
  animation-duration: 2s;
}

.six {
  border-width: 15px;
  background: var(--wbg), conic-gradient(from 0.25turn, transparent 0.0turn, transparent .125turn, orange 0.125turn, orange .25turn, transparent .25turn, transparent .375turn, orange 0.375turn, orange 0.5turn, transparent .5turn, transparent.625turn, orange .625turn, orange 0.75turn, transparent .75turn, transparent 0.875turn, orange .875turn, orange 1turn, transparent 1turn);
  opacity: 0.7;
}

.spnr {
  height: 60px;
  width: 60px;
  border-radius: 50%;
  border: 5px solid transparent;
  animation: spin 1s linear infinite;
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.six {
  animation: size 2s linear infinite alternate;
}

.five {
  animation-duration: 2s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes size {
  0% {
    transform: rotate(0deg) scale(0.2);
    border-width: 5px;
  }
  100% {
    border-width: 10px;
    transform: rotate(840deg) scale(1);
  }
}

<div>
  <div class="spnr one"></div>
  <div class="spnr two"></div>
  <div class="spnr three"></div>
  <div class="spnr four"></div>
  <div class="spnr five"></div>
  <div class="spnr six"></div>
</div>
<div class="dark">
  <div class="spnr one"></div>
  <div class="spnr two"></div>
  <div class="spnr three"></div>
  <div class="spnr four"></div>
  <div class="spnr five"></div>
  <div class="spnr six"></div>
</div>

Answer 4

conic-gradient

与

mask

并且没有复数值：

.ring {
  width: 150px; /* the size */
  padding: 8px; /* the border */
  background: #07e8d6; /* the color */
  aspect-ratio: 1;
  border-radius: 50%;
  -webkit-mask:
    conic-gradient(#0000,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  box-sizing: border-box;
  animation:r 2s linear infinite;
}

@keyframes r {to{transform:rotate(1turn)}}


body {
 background:linear-gradient(90deg,pink,#fff);
}

<div class="ring"></div>

Answer 5

<svg
    version="1.1"
    width="24" height="24"
    viewBox="-1 -1 25 25"
    xmlns="http://www.w3.org/2000/svg"
>
    <defs>
        <linearGradient x1="0%" y1="0%" x2="100%" y2="0" id="gradient-1">
            <stop stop-color="red" offset="0%" />
            <stop stop-color="red" offset="63.1%" stop-opacity=".631" />
            <stop stop-color="red" offset="100%" stop-opacity=".5" />
        </linearGradient>
        <linearGradient x1="0%" y1="0%" x2="100%" y2="0" id="gradient-2">
            <stop stop-color="red" offset="0%" stop-opacity=".5" />
            <stop stop-color="red" offset="63.1%" stop-opacity=".12" />
            <stop stop-color="red" offset="100%" stop-opacity="0" />
        </linearGradient>
    </defs>
    <g fill="none">
        <g transform="translate(1 1)">
            <path
                d="M 10.5 10.5 m -10.5 0a 10.5 10.5 0 1 0 21 0a"
                stroke="url(#gradient-1)"
                stroke-width="3"
            />
            <animateTransform
                attributeName="transform"
                type="rotate"
                from="0 10.5 10.5"
                to="360 10.5 10.5"
                dur="1s"
                repeatCount="indefinite"
            />
        </g>
        <g transform="translate(1 1)">
            <path
                d="M 10.5 10.5 m -10.5 0a 10.5 10.5 0 1 0 21 0a"
                stroke="url(#gradient-2)"
                stroke-width="3"
            />
            <animateTransform
                attributeName="transform"
                type="rotate"
                from="-180 10.5 10.5"
                to="180 10.5 10.5"
                dur="1s"
                repeatCount="indefinite"
            />
        </g>
    </g>
</svg>

环形工艺旋转器，环周围具有渐变渐变效果

问题描述投票：0回答：5

5个回答

SVG 解决方案

注意事项

SVG 版本如何工作

该解决方案在每个象限中使用单独的线性渐变，并依靠视觉相似性来掩盖接缝。环形是使用伪元素形成的。

与 SVG 解决方案不同，这仅适用于纯色背景。如果你想改变那个颜色，还需要修改几个地方，这是一个痛苦。

最新问题

环形工艺旋转器，环周围具有渐变渐变效果

问题描述 投票：0回答：5

5个回答

SVG 解决方案

注意事项

SVG 版本如何工作

该解决方案在每个象限中使用单独的线性渐变，并依靠视觉相似性来掩盖接缝。环形是使用伪元素形成的。

与 SVG 解决方案不同，这仅适用于纯色背景。如果你想改变那个颜色，还需要修改几个地方，这是一个痛苦。

最新问题

问题描述投票：0回答：5