css动画 倒计时 |纯css动画切换效果

//倒计时样式
.countdown {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: #fff;
background-color: #000;
width: 100%;
height: 100px;
position: relative;
}
//动画效果
@keyframes countdown {
0% {
transform: scaleY(1);
}
100% {
transform: scaleY(0);
}
}
//定义倒计时区域
.countdown span {
margin: 0 10px;
display: inline-block;
transform-origin: bottom;
animation: countdown 1s linear infinite;
}
//DOM操作实现倒计时
var count = 60;
var times = setInterval(function() {
if (count == 0) {
clearInterval(times);
return;
}
count--;
var minute = Math.floor(count / 60);
var second = count % 60;
document.getElementById("minute").innerHTML = minute< 10 ? "0" + minute : minute;
document.getElementById("second").innerHTML = second< 10 ? "0" + second : second;
}, 1000);

上述代码中，大家首先定义了倒计时的样式，包括他的字体大小、颜色、背景色以及高度和宽度等等。接着通过定义一个名为countdown的CSS动画，利用CSS3的transform属性来制造从上至下的动画效果。最后，在DOM操作中实现了倒计时的核心代码，用JavaScript来实现每秒钟倒计时数字的更新，同时通过innerHTML属性将更新后的内容替换页面上的原有数字。

使用CSS动画制造倒计时是一种简单而实用的方法。通过组合CSS动画与JavaScript代码，大家能够为页面带来生动的倒计时效果，提高页面的交互性和视觉体验。