css3怎么做圆倒计时 |css select 文字样式

html:
<div class="timer">
<div class="circle">
<div class="left half">
<div class="bar"></div>
</div>
<div class="right half">
<div class="bar"></div>
</div>
<div class="text">
<span class="time">00</span>
<span>:</span>
<span class="time">00</span>
</div>
</div>
</div>
css:
.timer {
width: 200px;
height: 200px;
position: relative;
margin: auto;
}
.circle {
width: 100%;
height: 100%;
position: relative;
}
.left.half,
.right.half {
width: 50%;
height: 100%;
position: absolute;
top: 0;
overflow: hidden;
}
.left.half {
left: 0;
}
.right.half {
left: 50%;
}
.bar {
width: 100%;
height: 200%;
position: absolute;
border-radius: 50%;
animation: countdown 60s linear infinite;
}
.text {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 40px;
}
.time {
font-weight: bold;
}
@keyframes countdown {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-180deg);
}
}
.left.half .bar {
transform-origin: 100% 50%;
}
.right.half .bar {
transform-origin: 0% 50%;
animation-delay: -60s;
}
.text span {
display: inline-block;
width: 50px;
}

以上就是使用CSS3实现圆倒计时的全部代码。大家首先在HTML中创建一个容器元素，然后在其中创建一个圆环元素，接着在圆环内部创建两个半圆元素并使用CSS将其水平排列，并创建一个中间的文本元素来显示倒计时，最后将倒计时动画应用在半圆元素上即可。通过一些细节处理，大家最终实现了一个简单的圆倒计时效果。