Question

我正试图在不使用SVG的情况下实现这样的目标：

https://codepen.io/arforcee/pen/erbKi?limit=all&page=2&q=circular+loader

这有可能吗？如果可以，有人可以就此提出建议吗？

带有SVG的CSS是这样的：

@import "compass/css3";

$radius: 100px; //also set the attribute in html
$stroke-width: 10px; //also set the attribute in html
$circle-stroke-color: red;
$circle-fill-color: #3ab54a;
$animation-duration: 60s;

.circle {
  @include animation(load $animation-duration ease-in-out);
  @include transform(rotate(-90deg));
  @include transform-origin($radius + $stroke-width);
  fill: $circle-fill-color;
  stroke: $circle-stroke-color;
  stroke-dasharray: ($radius * 2) * pi(); //C = πd
}

@include keyframes(load) {
  from {
    stroke-dashoffset: ($radius * 2) * pi(); //C = πd
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

我找到了一个有趣的here。它通过应用border-radius: 100%;

有效地创建了一个圆形元素

然后为border-top应用不同的颜色，以便仅突出显示边框的四分之一。然后使用您在示例中看到的关键帧动画旋转整个元素。

你可以举例并添加一个background-color，玩边框颜色并创建你想要的东西

CSS3：循环线预加载器？

1 个答案: