Css 动画中的剪辑路径和SVG矩形

我正在尝试用CSS制作一个奇特的动画。我从一个关于W3学校的教程开始，想把它做得更好。我的想法是让一个方形装载机顺时针转动，而另一个内部装载机将朝相反方向转动

在链接上，你们会看到我在说什么，唯一的区别是我希望红色部分朝相反的方向转动

为此，我尝试添加另一个类名为

.spinner

的div。以下是我的尝试：

.loader容器{
位置：绝对位置；
左：计算（50%-75px）；
宽度：150px；
高度：150像素；
填充物：5px；
边框：1px纯红；
顶部：钙（50%-75px）；
}
img{
宽度：200px；
利润率：20px；
/*动画：移动2秒交替无限线性*/
}
#myClip，#svg{
位置：绝对位置；
左：50%；
最高：50%；
}
.loader、.spinner{
位置：绝对位置；
}
.加载器{
左：计算（50%-35px）；
顶部：钙（50%-35px）；
宽度：40px；
高度：40px；
边框：15px实心透明；
边框顶部：15px实心无；
/*-webkit动画：加载程序2s线性无限；
动画：线性无限*/
}
斯宾纳先生{
左：计算值（50%-55.1px）；
顶部：钙（50%-55.1px）；
/*剪辑路径：url（#myClip）*/
宽度：40px；
边界半径：50%；
高度：40px；
边框：36px实心#F3；
边框顶部：36px实心#5cb85c；
/*-webkit动画：旋转2s线性无限；
动画：旋转2s线性无限*/
}
@-webkit关键帧加载程序{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；}
}
@关键帧加载程序{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}
@-webkit关键帧旋转{
0%{-webkit变换：旋转（0度）；}
100%{-webkit变换：旋转（-360度）；}
}
@关键帧旋转{
0%{变换：旋转（0度）；}
100%{变换：旋转（-360度）；}
}

---

对于没有SVG的仅CSS的解决方案，您需要一些帮助元素：

<div class="loader">
    <div class="square"></div>
    <div class="cutter">
        <div class="spinner">
        </div>
    </div>
</div>

结果:

---

缺点：如果必须匹配父/体的背景，则内部正方形必须具有坚实的背景（没有渐变或图像）。

对于没有SVG的仅CSS的解决方案，您需要一些辅助元素：

<div class="loader">
    <div class="square"></div>
    <div class="cutter">
        <div class="spinner">
        </div>
    </div>
</div>

结果:

---

缺点：如果必须匹配父/体的背景，则内部正方形必须具有坚实的背景（没有渐变或图像）。

您可以使用HTML和CSS创建微调器，然后将

clip path

属性与svg

元素结合使用，以消除溢出

微调器的html结构：

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

但在灰色的边界内外仍然有绿色的溢出物。因此，我们需要用svg将其切掉

小提琴：

---

缺点：仅在Firefox中受支持，不支持Chrome

您可以使用HTML和CSS创建微调器，然后将

clip path

属性与svg

元素结合使用，消除溢出

微调器的html结构：

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

但在灰色的边界内外仍然有绿色的溢出物。因此，我们需要用svg将其切掉

小提琴：

---

缺点：仅在Firefox中受支持，不支持Chrome

您可以在svg中使用一些多边形创建加载程序，然后使用clipPath将内部绿色加载程序剪掉

首先，将灰色边界定义为多边形：

<polygon id="loader" points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15" />

结果：

---

已在移动和桌面Firefox和Chrome上成功测试。

您可以使用一些多边形在svg中创建加载程序，然后使用clipPath将内部绿色加载程序剪掉

首先，将灰色边界定义为多边形：

<polygon id="loader" points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15" />

结果：

---

---

已在移动和桌面Firefox和Chrome上成功测试。

谢谢您的回答，但当我说“内部”时，我指的是方形加载器的灰色部分。。。你知道怎么做吗？对不起，我想绿色的部分会再次在正方形中流动；现在它的工作（我希望）如预期，但你需要一些更多的元素。太好了，谢谢你！是的，它是有效的，我没有想到使用溢出：隐藏。我失去了希望，尝试了所有我能用剪辑路径。。。“其他元素”是什么？@Ivan，因为这是一个完全不同的解决方案，我发布了一个新的答案。谢谢你的答案，但当我说“内部”时，我的意思是实际上在方形加载器的灰色部分内。。。你知道怎么做吗？对不起，我想绿色的部分会再次在正方形中流动；现在它的工作（我希望）如预期，但你需要一些更多的元素。太好了，谢谢你！是的，它是有效的，我没有想到使用溢出：隐藏。我失去了希望，尝试了所有我能用剪辑路径。。。“其他元素”是什么？@Ivan，因为这是一个完全不同的解决方案，我发布了一个新的答案。嘿，我尝试了同样的技术，它在你的计算机上起作用了吗。在我的页面上，我没有让svg多边形删除绿色溢出：啊，浏览器支持。html元素上的剪辑路径仅在Firefox中有效。请看这篇文章：使用轮式装载机怎么样？哦我想这就是为什么我的测试不起作用，我在Chrome上，从来没有尝试过在Firefox上测试它。。。谢谢你帮了我很多@Felix.已经有一段时间了。。。我有一个问题，为什么在chrome上工作而不是我的预加载程序？显然，当在图像（而不是div）上使用clip path时，它在chrome上工作，可能是因为它们很容易转换为svg图像。您可以通过使用svg路径而不是html div来避免浏览器支持（请参见我的下一个答案）。在我的页面上，我没有让svg多边形删除绿色溢出：啊，浏览器支持。html元素上的剪辑路径仅在Firefox中有效。请看这篇文章：使用轮式装载机怎么样？哦我想这就是为什么我的测试不起作用的原因

<polygon id="loader" points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15" />

<svg height="0" width="0">
    <defs>
        <polygon id="loader" points="..." />
    </defs>
</svg>

<clipPath id="loaderClipper">
    <use xlink:href="#loader" x="15" y="15" />
</clipPath>

<svg width="100" height="100" viewbox="0 0 100 100" clip-path="url(#loaderClipper)">
    <use xlink:href="#loader" class="loader" x="15" y="15" />
    <polygon class="spinner" points="0,0 100,0 50,50" x="30" y="30" />
</svg>

svg {
  animation: rotate 2s linear infinite;
  transform-origin: 50px 50px;
}

.loader {
  fill: #dcdada;
}

.spinner {
  fill: #5cb85c;
  animation: rotate 1s linear infinite reverse;
  transform-origin: 50px 50px;
}