<分区>
我找到了 this在运球上。
是否可以在 gif 的前 ~3 秒内创建这个圆形进度条(其中进度条是圆圈的外边界)？
到目前为止，我在 jsfiddle 上没有任何动画的圆圈本身
我该如何继续？
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%;
}
最佳答案
嗯，那很有趣。有一些时间可以消磨，所以我把这当作挑战并接受了它。在 JSFiddle 上用 SCSS 编码。我在 SCSS 之上包含了一些变量来调整所有内容。 jQuery 只是为了点击事件添加一个类。
https://jsfiddle.net/44ch0p8u/11/
非 Sass 版本可以在这里查看:
$('.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);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle">
<div class="circle-inner"></div>
<div class="circle-left"></div>
<div class="circle-right"></div>
</div>关于html - 圆形进度条(边框)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41293945/