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

Question

我正在尝试仅在 CSS 中制作精美的动画。我从 W3 School 的教程开始，想把它做得更好。我的想法是让一个方形装载机顺时针转动，而另一个内部则向相反方向转动。

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

为此，我尝试添加另一个类名为 .spinner 的 div。这是我的尝试：https://jsfiddle.net/avhjj4ps/

.loader-container {
  position: absolute;
  left: calc(50% - 75px);
  width: 150px;
  height: 150px;
  padding: 5px;
  border: 1px solid red;
  top: calc(50% - 75px);
}
img {
  width: 200px;
  margin: 20px;
  /*animation: move 2s alternate infinite linear;*/
}

#myClip, #svg {
  position: absolute;
  left: 50%;
  top: 50%;
}


.loader, .spinner {
position: absolute;

}
.loader {
  left: calc(50% - 35px);
  top: calc(50% - 35px);
  width: 40px;
  height: 40px;
  border: 15px solid transparent;
  border-top: 15px solid none;
  /*-webkit-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;*/
}
.spinner {
  left: calc(50% - 55.1px);
  top: calc(50% - 55.1px);
  /*clip-path: url(#myClip);*/
  width: 40px;
  border-radius: 50%;
  height: 40px;
  border: 36px solid #f3f3f3;
  border-top: 36px solid #5cb85c;
  /*-webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;*/
}

@-webkit-keyframes loader {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

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

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

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

<div class="loader-container">
 <div class="loader"></div>
<div class="spinner"></div>
  
<svg id="svg" width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <rect x="-35" y="-35" width="15" height="70" />
      <rect x="20" y="-35" width="15" height="70" />
      <rect x="-35" y="-35" width="70" height="15" />
      <rect x="-35" y="20" width="70" height="15" />
      
    </clipPath>
  </defs>
</svg>
  
</div>

我试图仅在有方形装载机的地方显示绿色微调器。它就像一个面具。在上面的 sn-p 中（也可以在这里找到：http://codepen.io/anon/pen/ZOoByA），我正在尝试使用 clip-path 属性。 有人能告诉我为什么clip-path: url(#myClip); 不起作用吗？当我评论这一行时，加载程序完全显示，但是在活动时它根本不显示。

Answer 1

您可以使用一些多边形在 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" />

由于我们将重用这个形状（实际的加载器和剪辑路径形状），我们将其放入 defs 标签中：

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

然后我们把clipPath放到同一个defs标签中：

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

15的偏移量是这样计算的：loader的宽度是70，但是如果旋转45度，宽度是70√2，四舍五入到100。左右的空白是(100 - 70) / 2 = 15。

实际使用的元素的 svg 如下所示：

<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>

还有一些用于颜色和动画的 css：

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;
}

结果小提琴：https://jsfiddle.net/apLepsv3/10/

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

Answer 2

您可以使用 HTML 和 CSS 创建微调器，然后结合使用 clip-path 属性和 svg <clipPath> 元素来消除溢出。

您的微调器的 html 结构：

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

现在将两个元素放在一起：

.loader {
  width: 40px;
  height: 40px;
  position: relative;
  left: 30px;
  top: 30px;
  border: 15px solid #dcdada;
  border-top: 15px solid none;
  -webkit-animation: loader 2s linear infinite;
  animation: loader 2s linear infinite;
}

.spinner {
  width: 0px;
  height: 0px;
  position: relative;
  left: -30px;
  top: -30px;
  border: 50px solid transparent;
  border-top: 50px solid #5cb85c;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

但灰色边框内外仍有绿色溢出。所以我们需要用 svg <polygon> 把它剪掉。

<svg height="0" width="0">
    <defs>
        <clipPath id="loaderClipper">
            <polygon points="0,0 0,70 70,70 70,0 0,0 15,15 55,15 55,55 15,55 15,15"/>
        </clipPath>
    </defs>
</svg>

这些点定义了一个 70x70 的正方形，其中一个 40x40 的正方形被截断。

然后添加引用 svg <clipPath> 元素的 clip-path 属性：

.loader {
  clip-path: url(#loaderClipper);
}

小提琴：https://jsfiddle.net/apLepsv3/2/

缺点：只支持Firefox，Chrome不支持

Answer 3

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

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

然后是这段 CSS 代码：

.square {
  width: 40px;
  height: 40px;
  background: #f3f3f3;
  z-index: 1;
}

.cutter {
  width: 70px;
  height: 70px;
  left: -15px;
  top: -15px;
  overflow: hidden;
}

.spinner {
  width: 54px;
  border-radius: 50%;
  height: 54px;
  border: 8px solid transparent;
  border-top: 8px solid #5cb85c;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  margin-left: -15px;
  margin-top: -15px;
}

结果：https://jsfiddle.net/avhjj4ps/3/

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