0
我只使用HTML/CSS製作了一個派爾計時器動畫。你可以在這裏看到：不穩定的CSS動畫
https://jsfiddle.net/yisusans/why2wy5q/
.timer-container {
background: -webkit-linear-gradient(left, #677291 50%, #D8DAE5 50%);
border-radius: 100%;
height: 30px;
position: relative;
top: 5px;
left: 9px;
width: 30px;
-webkit-animation: time 20s linear 1;
animation: time 20s linear 1;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-moz-transform: translateZ(1) scale(1.0, 1.0);
-ms-transform: translateZ(1) scale(1.0, 1.0);
-o-transform: translateZ(1) scale(1.0, 1.0);
-webkit-transform: translateZ(1) scale(1.0, 1.0);
transform: translateZ(1) scale(1.0, 1.0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.timer {
border-radius: 100% 0 0 100%/50% 0 0 50%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 50%;
-webkit-animation: mask 20s linear 1;
-webkit-transform-origin: 100% 50%;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@-webkit-keyframes time {
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes mask {
0% {
background: #D8DAE5;
-webkit-transform: rotate(0deg);
}
50% {
background: #D8DAE5;
-webkit-transform: rotate(-180deg);
}
50.01% {
background: #677291;
-webkit-transform: rotate(0deg);
}
100% {
background: #677291;
-webkit-transform: rotate(-180deg);
}
}
@keyframes time {
100% {
transform: rotate(360deg);
}
}
@keyframes mask {
0% {
background: #D8DAE5;
transform: rotate(0deg);
}
50% {
background: #D8DAE5;
transform: rotate(-180deg);
}
50.01% {
background: #677291;
transform: rotate(0deg);
}
100% {
background: #677291;
transform: rotate(-180deg);
}
}<div class='timer-container'>
<div class='timer'></div>
</div>它的工作原理，但它是一個有點不穩。任何提示平滑動畫將是驚人的。
謝謝！
有趣......我讓它在我的電腦上運行，它很不穩定。即使在本地運行它也不穩定。我只把它放在jsfiddle上以便共享一個stackoverflow。 – ssyi