1.整体效果
实现了一个倒计时动画效果，包括数字区域和倒计时结束区域。数字区域显示倒计时数字，数字进入时有动画效果，数字离开时也有动画效果。倒计时结束后，数字区域隐藏，倒计时结束区域显示，显示时也有动画效果。用户可以点击重新开始按钮重新开始倒计时。
2.完整代码
HTML
<!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" type="text/css" href="6_12.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="6_12.js"></script> </html>
CSS
/* 清除所有元素的默认margin和padding */ * { margin: 0; /* 清除外边距 */ padding: 0; /* 清除内边距 */} /* 设置body的高度为视口高度，并使用flex布局进行居中 */body { height: 100vh; /* 视口高度 */ display: flex; /* 弹性布局 */ justify-content: center; /* 主轴居中对齐 */ align-items: center; /* 交叉轴居中对齐 */ background: linear-gradient(to bottom, #fdfbfb, #ebedee); /* 背景线性渐变，从上到下 */} /* 容器元素，设置为相对定位 */.container { position: relative; /* 相对定位 */} /* 计数器容器，宽度100%，文本居中对齐 */.counter { width: 100%; /* 宽度100% */ text-align: center; /* 文本居中对齐 */} /* 隐藏计数器动画 */.counter.hide { transform: scale(0); /* 缩放到0 */ animation: hide 0.2s ease-out; /* 应用名为hide的动画，持续0.2秒，使用ease-out缓动函数 */} /* 数字容器样式 */.nums { width: 250px; /* 宽度250px */ height: 80px; /* 高度80px */ color: #5696ff; /* 字体颜色 */ font-size: 80px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ display: flex; /* 弹性布局 */ justify-content: center; /* 主轴居中对齐 */ align-items: center; /* 交叉轴居中对齐 */ margin-bottom: 15px; /* 下边距15px */ position: relative; /* 相对定位 */ overflow: hidden; /* 溢出内容隐藏 */} /* 数字容器内的span元素样式 */.nums span { position: absolute; /* 绝对定位 */ transform-origin: bottom center; /* 变换原点设置在底部中心 */ transform: rotate(120deg); /* 旋转120度 */} /* 数字进入动画 */.nums span.in { animation: goIn 0.5s ease-in-out; /* 应用名为goIn的动画，持续0.5秒，使用ease-in-out缓动函数 */} /* 数字退出动画 */.nums span.out { animation: goOut 0.5s ease-in-out; /* 应用名为goOut的动画，持续0.5秒，使用ease-in-out缓动函数 */} /* 最终显示的内容容器样式 */.final { position: absolute; /* 绝对定位 */ top: 0; /* 顶部对齐 */ left: 0; /* 左侧对齐 */ width: 100%; /* 宽度100% */ text-align: center; /* 文本居中对齐 */ transform: scale(0); /* 缩放到0 */ } /* 最终显示内容显示动画 */.final.show { transform: scale(1); /* 缩放到1 */ animation: show 0.3s ease-in; /* 应用名为show的动画，持续0.3秒，使用ease-in缓动函数 */} /* 重播按钮样式 */.replay { width: 100%; /* 宽度100% */ background-color: #5696ff; /* 背景颜色 */ color: #fff; /* 字体颜色 */ border: none; /* 无边框 */ padding: 10px 0; /* 上下内边距10px */ margin-top: 20px; /* 上边距20px */ cursor: pointer; /* 鼠标悬停时变为手形图标 */} /* 隐藏动画：从正常大小逐渐缩小到0 */ @keyframes hide { 0% { transform: scale(1); /* 动画开始时，元素为正常大小 */ } 100% { transform: scale(0); /* 动画结束时，元素缩小到0 */ } } /* 显示动画：从0开始放大，稍微超过正常大小，然后回到正常大小 */@keyframes show { 0% { transform: scale(0); /* 动画开始时，元素为0大小 */ } 80% { transform: scale(1.4); /* 动画过程中，元素放大到1.4倍大小 */ } 100% { transform: scale(1); /* 动画结束时，元素回到正常大小 */ } } /* 进入动画：数字从旋转120度逐渐恢复到0度 */@keyframes goIn { 0% { transform: rotate(120deg); /* 动画开始时，元素旋转120度 */ } 30% { transform: rotate(-20deg); /* 动画过程中，元素旋转到-20度 */ } 60% { transform: rotate(10deg); /* 动画过程中，元素旋转到10度 */ } 90%, 100% { transform: rotate(0); /* 动画结束前和结束时，元素旋转到0度 */ } } /* 退出动画：数字从0度逐渐旋转到-120度 */@keyframes goOut { 0%, 30% { transform: rotate(0); /* 动画开始时和动画过程中，元素为0度 */ } 60% { transform: rotate(20deg); /* 动画过程中，元素旋转到20度 */ } 100% { transform: rotate(-120deg); /* 动画结束时，元素旋转到-120度 */ } }
JavaScript
// 获取所有类名为'nums'的元素下的'span'子元素，并将它们存储在'nums'数组中 const nums = document.querySelectorAll('.nums span'); // 获取类名为'counter'的元素，并存储在'counter'变量中 const counter = document.querySelector('.counter'); // 获取类名为'final'的元素，并存储在'final'变量中 const final = document.querySelector('.final'); // 获取类名为'replay'的元素，并存储在'replay'变量中 const replay = document.querySelector('.replay'); // 重置函数：将界面重置为初始状态 function reset() { // 移除'counter'元素上的'hide'类，使其可见 counter.classList.remove('hide'); // 移除'final'元素上的'show'类，使其隐藏 final.classList.remove('show'); // 遍历'nums'数组中的每个元素 nums.forEach(num => { // 移除当前'span'元素上的所有类名 num.className = ''; }); // 给'nums'数组中的第一个'span'元素添加'in'类，使其开始进入动画 nums[0].classList.add('in'); } // 运行函数：为'nums'数组中的每个'span'元素添加动画结束事件监听器 function run() { nums.forEach((num, index) => { // 当动画结束时触发此函数 num.addEventListener('animationend', e => { // 如果动画名称为'goIn'且当前元素不是最后一个元素 if (e.animationName === 'goIn' && index !== nums.length - 1) { // 移除当前元素的'in'类，使其停止进入动画 num.classList.remove('in'); // 给当前元素添加'out'类，使其开始退出动画 num.classList.add('out'); } // 如果动画名称为'goOut'且当前元素有下一个兄弟元素 else if (e.animationName === 'goOut' && num.nextElementSibling) { // 给下一个兄弟元素添加'in'类，使其开始进入动画 num.nextElementSibling.classList.add('in'); } // 如果以上条件都不满足（即最后一个元素动画结束） else { // 隐藏'counter'元素 counter.classList.add('hide'); // 显示'final'元素 final.classList.add('show'); } }) }) } // 当'replay'元素被点击时，触发重置和运行函数 replay.addEventListener('click', function () { reset(); run(); }); // 页面加载完成后立即运行run函数 run();
