倒计时动效

1. 效果

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;}
}