1. 效果
文章來源地址http://www.zghlxwxcb.cn/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;
}
}
文章來源：http://www.zghlxwxcb.cn/news/detail-664846.html
到了這里，關(guān)于倒計時動效的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
