css 倒计时动画效果 |css下载字体库

.clock {
display: inline-block;
font-size: 2em;
font-weight: bold;
text-align: center;
margin: 0 10px;
}
.clock span {
font-size: 0.3em;
}
.circle_animation {
height: 80px;
position: relative;
width: 80px;
}
.circle_animation:after {
border-radius: 50%;
box-shadow: 0 3px 0 #ccc, 0 6px 0 #cecece, 0 9px 0 #ddd, 0 12px 0 #efefef, 0 15px 0 #f7f7f7;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.clock_timer {
transform-origin: center;
}
.clock_timer-animation {
animation-duration: 1s;
animation-name: timer;
animation-timing-function: steps(5);
animation-iteration-count: infinite;
}
@keyframes timer {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
20% {
transform: rotate(72deg);
}
40% {
transform: rotate(144deg);
}
60% {
transform: rotate(216deg);
}
80% {
transform: rotate(288deg);
}
}

这段CSS代码实现了一个圆形倒计时动画效果，其中通过使用transform-origin设置旋转的基点，然后使用animation-name和@keyframes来控制动画的执行过程。同时CSS中还使用了border-radius、box-shadow等属性，这些属性可以让大家的倒计时效果更加丰富多彩。在这段CSS代码中，大家使用了伪类:after来实现了一个圆形的基底，实现了一个类似钟表的效果。