Question

我有兴趣在CSS中创建一个加载微调器，但为了做到这一点，我需要能够绘制一个像这样的开环形状：

戒指会围绕圆周绘制。这在CSS中是否可以实现？

Answer 1

要创建逐渐绘制外部路径的圆，请使用SVG。

SVG的stroke-dasharray属性会将任何路径变为虚线，您可以通过将短划线大小设置为与路径本身一样长的方式来利用它。

然后使用CSS动画逐渐更改stroke-dashoffset以围绕圆圈的周边移动短划线。

circle {
  fill: white;
  stroke: black;
  stroke-width: 2;
  stroke-dasharray: 250;
  stroke-dashoffset: 1000;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 0;
  }
}

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" />
</svg>

Answer 2

静态图像

仅依赖于单个HTML元素和CSS类的简化示例可能如下所示：

.arc {
  /* Border size and color */
  border: 2px solid #000;
  /* Creates a circle */
  border-radius: 50%;
  /* Circle size */
  height: 100px;
  width: 100px;
  /* Use transparent borders to define opening (more transparent = larger opening) */
  border-top-color: transparent;
  border-left-color: transparent;
  /* Use transform to rotate to adjust where opening appears */
  transform: rotate(300deg)
}

示例

＆＃13;
＆＃13;
.arc { border: 2px solid #000; border-radius: 50%; height: 100px; width: 100px; border-top-color: transparent; transform: rotate(300deg) }
＆＃13;
<div class='arc'></div>
＆＃13;
＆＃13;
＆＃13;

旋转图像

您可以使用@keyframes利用基于CSS的动画，将基本旋转应用于上一个静态示例：

.arc { /* Border size and color */ border: 2px solid #000; /* Creates a circle */ border-radius: 50%; /* Circle size */ height: 100px; width: 100px; /* Use transparent borders to define opening (more transparent = larger opening) */ border-top-color: transparent; /* Rotate indefinitely (longer time = slower rotation) */ animation: rotate 2s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

示例

＆＃13;
＆＃13;
.arc { border: 2px solid #000; border-radius: 50%; height: 100px; width: 100px; border-top-color: transparent; animation: rotate 2s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
＆＃13;
<div class='arc'></div>
＆＃13;
＆＃13;
＆＃13;

绘图（没有SVG）

另一种方法that I came across虽然不像以前的方法那样优雅，但似乎达到了预期的效果。在涉及使用几个动画以及根据需要显示/隐藏圆圈的不同部分。

代码段中包含一个演示它的示例。

示例

＆＃13;
＆＃13;
#container { position: absolute; width: 100px; height: 100px; animation: colors 1s infinite; } #halfclip { width: 50%; height: 100%; right: 0px; position: absolute; overflow: hidden; transform-origin: left center; animation: cliprotate 4s steps(2) infinite; -webkit-animation: cliprotate 4s steps(2) infinite; } .halfcircle { box-sizing: border-box; height: 100%; right: 0px; position: absolute; border: solid 2px transparent; border-top-color: #000; border-left-color: #000; border-radius: 50%; } #clipped { width: 200%; animation: rotate 2s linear infinite; -webkit-animation: rotate 2s linear infinite; } #fixed { width: 100%; transform: rotate(135deg); animation: showfixed 4s steps(2) infinite; -webkit-animation: showfixed 4s linear infinite; } @-webkit-keyframes cliprotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes cliprotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate { 0% { transform: rotate(-45deg); } 100% { transform: rotate(135deg); } } @keyframes rotate { 0% { transform: rotate(-45deg); } 100% { transform: rotate(135deg); } } @-webkit-keyframes showfixed { 0% { opacity: 0; } 49.9% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } }
＆＃13;
<div id="container"> <div id="halfclip"> <div class="halfcircle" id="clipped"> </div> </div> <div class="halfcircle" id="fixed"> </div> </div>
＆＃13;
＆＃13;
＆＃13;

绘图（使用SVG）

利用SVG可能是解决此问题的最佳方法，因为它明确地设计用于处理浏览器中的绘图。如果SVG支持可用，我强烈推荐这种方法。

Dylan's response详细说明了此实现的内容。

Answer 3

您可以使用伪元素::after来创建开放部分，只是重叠圆元素。优点是，开放部分可以与所希望的一样长（不限于3/4整圆）。

.circle {
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 50%;
  margin: 30px;
  animation: rotate 1s infinite linear;
}
.circle::after {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background: white;
  border-radius: 50%;
  margin: -30% 0 0 -30%;
}
@keyframes rotate {
  0%    { transform: rotate(0deg);  }
  100%  { transform: rotate(360deg);  }
}

<div class="circle"></div>

Answer 4

对于伪版本，您还可以使用linear-gradient（阴影可以减少或增加）和background-clip，

在可用的情况下，mix-blend-mode可以使其成为半透明的，

currentcolor和animation也可用于为颜色设置动画：

.loader {
  font-size: 1.5em;
  color: gray;
  position: relative;
  padding: 3px;
  /* make a square */
  height: 100px;
  width: 100px;
  /* center content*/
  display: flex;
  align-items: center;
  justify-content: center;
  animation: coloranim infinite 5s;
}

.circle {
  border-radius: 100%;
  overflow: hidden;
}

.loader:after {
  border-radius: inherit;
  color: inherit;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px;
  background: linear-gradient(white, white), linear-gradient(0deg, transparent 40%, currentcolor 60%), linear-gradient(50deg, transparent 50%, currentcolor 52%);
  background-clip: content-box, border-box, border-box;
  z-index: -1;
  mix-blend-mode: multiply;/* if avalaible, else bg remains white */
}

.spin:after {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes coloranim {
  20% {
    color: tomato;
  }
  40% {
    color: purple;
  }
  60% {
    color: turquoise;
  }
  80% {
    color: green;
  }
}


/* demo purpose, use your own style wherever your loader is needed */

html {
  height: 100%;
  display: flex;
  background: url(http://lorempixel.com/800/800/food/3);
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.3)
}

body {
  margin: auto;
}

<div class="spin circle loader coloranim"> loading... </div>

http://codepen.io/gc-nomade/pen/YNbmGE

是否可以在CSS（开环形状）中绘制部分圆形轮廓？

4 个答案:

静态图像

旋转图像

绘图（没有SVG）

绘图（使用SVG）