Question

我试图只在CSS中制作奇特的动画。我开始学习W3学校的教程，并希望让它变得更好。我的想法是让方形装载机顺时针转动，而另一个内侧转向相反方向。

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

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

Answer 1

对于没有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/

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

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 clip-path元素的<clipPath>属性：

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

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

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

Answer 3

您可以使用一些多边形在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的偏移量按以下方式计算：装载机的宽度为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上成功测试。

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

3 个答案: