效果演示
实现了一个倒计时动画效果,包括数字区域和倒计时结束区域。数字区域显示倒计时数字,数字进入时有动画效果,数字离开时也有动画效果。倒计时结束后,数字区域隐藏,倒计时结束区域显示,显示时也有动画效果。用户可以点击重新开始按钮重新开始倒计时。
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时动画效果</title>
<link rel="stylesheet" href="./10-倒计时动画效果.css">
</head>
<body>
<div class="container">
<div class="counter">
<div class="nums">
<span class="in">3</span>
<span>2</span>
<span>1</span>
<span>0</span>
</div>
<h3>准备</h3>
</div>
<div class="final">
<h1>活动开始</h1>
<button class="replay">重来</button>
</div>
</div>
</body>
<script src="./10-倒计时动画效果.js"></script>
</html>
/* 清除所有元素的默认margin和padding */
* {
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
}
/* 设置body的高度为视口高度,并使用flex布局进行居中 */
body {
height: 100vh; /* 视口高度 */
display: flex; /* 弹性布局 */
justify-content