vue圆形百分⽐进度条_纯CSS3实现圆弧（圆圈）百分⽐动画
进度条
来⾃国外的⼀个⽜⼈写的代码，根据CSS3的clip、transform和animation来实现的效果，所以你需要很清楚的知道这些属性是具有哪些作⽤的才能明⽩他这个CSS的原理。
⾸先定义基本样式：
.wrapper {
width: 100px; /* Set the size of the progress bar */
height: 100px;
position: absolute; /* Enable clipping */
clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */
}
/* Set the sizes of the elements that make up the progress bar */
.circle {
width: 80px;
height: 80px;
border: 10px solid green;
rotate属性border-radius: 50px;
position: absolute;
clip: rect(0px, 50px, 100px, 0px);
}
接着是动画规则
/* Using the data attributes for the animation selectors. */
/* Base settings for all animated elements */
div[data-anim~=base] {
-webkit-animation-iteration-count: 1; /* Only run once */
-webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
-webkit-animation-timing-function:linear; /* Linear animation */
}
.wrapper[data-anim~=wrapper] {
-webkit-animation-duration: 0.01s; /* Complete keyframes asap */
-webkit-animation-delay: 3s; /* Wait half of the animation */
-webkit-animation-name: close-wrapper; /* Keyframes name */
}
.circle[data-anim~=left] {
-
webkit-animation-duration: 6s; /* Full animation time */
-webkit-animation-name: left-spin;
}
.circle[data-anim~=right] {
-webkit-animation-duration: 3s; /* Half animation time */
-webkit-animation-name: right-spin;
}
最后是动画帧
/* Rotate the right side of the progress bar from 0 to 180 degrees */ @-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(180deg);
}
}
/* Rotate the left side of the progress bar from 0 to 360 degrees */ @-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
/* Set the wrapper clip to auto, effectively removing the clip */
@-webkit-keyframes close-wrapper {
to {
clip: rect(auto, auto, auto, auto);
}
}
操作原理：
⾸先：是定义三个动画，第⼀个是最外层，让他只显⽰⼀半，然后运⾏3s，同时右边运⾏3s，从0到180度。接着：到了180度之后，释放外层的显⽰⼀半，让他⾃动显⽰其他。然后右边的停⽌动画并停在那⾥。
最后：左边的在原来的基础(跟右边⼀样运⾏3s，同样转过180度)再继续转动180度。
演⽰地址：pure css circular progress bar

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。