Question

我在运球时发现了这个：

是否可以在gif的前3秒内创建此循环进度条（进度条是圆的外边框）？

到目前为止，我的圈子本身没有任何动画：

我怎么会从这里继续？

HTML：

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

CSS：

body {
  background-color: #3a88cd;
  padding: 60px;
}

.circle {
  width: 60px;
  height: 60px;
  background: white;
  position: relative;
  border-radius: 100%;
}

.circle:after {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  bottom: -8px;
  right: -8px;
  border: 3px solid white;
  border-radius: 100%;
}

Answer 1

嗯，这很有趣。有一段时间可以杀人，所以我把它作为一个挑战，并与它一起运行。在JSFiddle上用SCSS编写。我在SCSS上添加了一些变量来调整所有内容。 jQuery只在click事件中添加一个类。

https://jsfiddle.net/44ch0p8u/11/

非Sass版本看到它住在这里：

switchMap()

$('.circle').on('click', function() {
  $this = $(this);
  $this.removeClass('animate');
  setTimeout(function() {
    $this.addClass('animate');
  }, 50)
})

body {
  background-color: #3a88cd;
  padding: 60px;
}
.circle {
  cursor: pointer;
  width: 74px;
  height: 74px;
  position: relative;
  border-radius: 50%;
}
.circle-right {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.circle-right:before {
  content: '';
  background: #fff;
  border-radius: 0 60px 60px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
}
.circle-right:after {
  content: '';
  background: #3a88cd;
  border-radius: 0 60px 60px 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  transform-origin: 0 50%;
  transform: scale(1.1);
}
.circle.animate .circle-right:after {
  animation: circle-half 1s forwards ease-in;
}
.circle-left {
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}
.circle-left:before {
  content: '';
  background: #fff;
  border-radius: 60px 0 0 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}
.circle-left:after {
  content: '';
  background: #3a88cd;
  border-radius: 60px 0 0 60px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  transform-origin: 100% 50%;
  transform: scale(1.1);
}
.circle.animate .circle-left:after {
  animation: circle-half 1s 1s forwards ease-out;
}
.circle-inner {
  background: #3a88cd;
  border-radius: 50%;
  position: relative;
  width: 68px;
  height: 68px;
  top: 3px;
  left: 3px;
  z-index: 3;
}
.circle-inner:before {
  content: '';
  background: #fff;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 60px;
  top: 4px;
  left: 4px;
}
@keyframes circle-half {
  from {
    transform: rotate(0deg) scale(1.1);
  }
  to {
    transform: rotate(180deg) scale(1.1);
  }
}

圆形进度条（边框）

1 个答案: