简易的倒计时动画-CSS实现
2021-01-24 本文已影响0人
在小白的路上越走越远
以下代码参考：https://blog.csdn.net/whqet/article/details/19899733
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background: #333;
}
.cell {
width: 1em;
height: 1em;
border: 1px dashed rgba(255, 255, 255, 0.1);
font-size: 120px;
font-family: Frijole;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.5em;
}
.num {
position: absolute;
width: 1em;
color: #e53f39;
line-height: 1em;
text-align: center;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
animation: run 5s steps(5) forwards;
}
.num>span{
cursor: pointer;
}
@keyframes run {
0% {
transform: translate(0,0);
}
100%{
transform: translate(0,-5em);
}
}
</style>
</head>
<body>
<div class="overlay"></div>
<div class="cell">
<div class="num">5 4 3 2 1 <span>X</span></div>
</div>
</body>
</html>
思路：通过移动num的位置，让其看上去有跳动的效果。
用CSS动画实现倒计时的背景：JS造成阻塞，无法通过setTimeout和requestanimationframe实现倒计时效果。
而通过CSS实现倒计时如何让页面不卡顿，重点在于使用了transform.
transform和opacity不会引起页面的重绘重排，故在JS阻塞的情况下，依然能正常渲染。
@keyframes run {
0% {
transform: translate(0,0);
}
100%{
transform: translate(0,-5em);
}
如果采用定位的 top 等方式，会导致页面重绘重排，在JS阻塞，页面卡顿的情况下，依然不能很好的实现倒计时。
@keyframes run {
0% {
top:0;
}
100%{
top:-5em;
}
transfrom与opacity资料参考：https://blog.csdn.net/devcloud/article/details/102739651
