1. 效果
文章来源地址https://www.toymoban.com/news/detail-664846.html
2. html
<div class="count">
<span>3</span>
<span>2</span>
<span>1</span>
</div>
3. css
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.count {
position: relative;
width: 180px;
height: 180px;
font-family: Consolas, Monaco, monospace;
font-size: 100px;
border: 5px solid #333333;
border-radius: 50%;
overflow: hidden;
}
.count span {
display: block;
width: 100%;
height: 180px;
line-height: 180px;
text-align: center;
animation: count 5s steps(5, end) forwards, shark 1s .8s 5;
}
.count::after {
content: 'Go!';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
font-size: 70px !important;
animation: go .5s 3s forwards;
}
@keyframes count {
to {
transform: translateY(calc(-5 * 180px));
}
}
@keyframes shark {
0% {
opacity: 1;
}
20% {
opacity: 0;
font-size: 40px;
}
}
@keyframes go {
to {
font-size: 70px;
opacity: 1;
}
}
文章来源：https://www.toymoban.com/news/detail-664846.html
到了这里，关于倒计时动效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
