day34-Animated Countdown（动画倒计时）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day34-Animated Countdown（动画倒计时）

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Animated Countdown</title><link rel="stylesheet" href="style.css" />
</head><body><!-- 计数器 --><div class="counter"><div class="nums"><span class="in">3</span><span>2</span><span>1</span><span>0</span></div><h4>准备</h4></div><!-- 完成 --><div class="final"><h1>GO</h1><button id="replay">重播</button></div><script src="script.js"></script>
</body></html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');* {box-sizing: border-box;
}body {background: url('https://source.unsplash.com/random/1000x600') no-repeat center/100% 100%;font-family: 'Roboto', sans-serif;margin: 0;height: 100vh;overflow: hidden;
}/* 准备 */
h4 {font-size: 20px;margin: 5px;
}/* 计数器 */
.counter {position: fixed;/* 居中 */top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;
}/* 隐藏计数器 */
.counter.hide {transform: translate(-50%, -50%) scale(0);animation: hide 0.2s ease-out;
}/* 隐藏计数器动画 */
@keyframes hide {0% {transform: translate(-50%, -50%) scale(1);}100% {transform: translate(-50%, -50%) scale(0);}
}/* 完成 默认隐藏 */
.final {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);text-align: center;
}/* 完成 显示 */
.final.show {transform: translate(-50%, -50%) scale(1);animation: show 0.2s ease-out;
}/* 完成 显示动画 */
@keyframes show {0% {transform: translate(-50%, -50%) scale(0);}30% {transform: translate(-50%, -50%) scale(1.4);}100% {transform: translate(-50%, -50%) scale(1);}
}.nums {color: red;font-size: 50px;position: relative;overflow: hidden;width: 250px;height: 50px;
}/* 数字 */
.nums span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(120deg);/* 旋转中心为底部中心 */transform-origin: bottom center;
}/* 显示数字 */
.nums span.in {transform: translate(-50%, -50%) rotate(0deg);animation: goIn 0.5s ease-in-out;
}/* 隐藏数字 */
.nums span.out {animation: goOut 0.5s ease-in-out;
}/* 显示数字 动画 */
@keyframes goIn {0% {transform: translate(-50%, -50%) rotate(120deg);}30% {transform: translate(-50%, -50%) rotate(-20deg);}60% {transform: translate(-50%, -50%) rotate(10deg);}100% {transform: translate(-50%, -50%) rotate(0deg);}
}/* 隐藏数字 动画 */
@keyframes goOut {0% {transform: translate(-50%, -50%) rotate(0deg);}60% {transform: translate(-50%, -50%) rotate(20deg);}100% {transform: translate(-50%, -50%) rotate(-120deg);}
}

script.js

// 重点 position: fixed; transform animation keyframes   num.addEventListener('animationend'
// 1.获取元素节点 
const nums = document.querySelectorAll('.nums span') //数字
const counter = document.querySelector('.counter')  //计数器
const finalMessage = document.querySelector('.final') //完成
const replay = document.querySelector('#replay') //重播
// 执行动画
runAnimation()
// 初始化
function resetDOM() {// 计数器显示counter.classList.remove('hide')// 完成 隐藏finalMessage.classList.remove('show')// 全部数字的类为空nums.forEach((num) => {num.classList.value = ''})// 第一个数字显示nums[0].classList.add('in')
}
// 倒计时
function runAnimation() {nums.forEach((num, idx) => {const nextToLast = nums.length - 1// 添加了一个事件监听器，当动画结束时执行相应的回调函数。// 注意：一个数字有两个动画num.addEventListener('animationend', (e) => {// 前三个的数字 e.animationName 事件的动画名称if (e.animationName === 'goIn' && idx !== nextToLast) {// 隐藏console.log(idx);//0 1 2 num.classList.remove('in')num.classList.add('out')} else if (e.animationName === 'goOut' && num.nextElementSibling) {//前三个的数字console.log(idx);//0 1 2 num.nextElementSibling.classList.add('in')} else {//最后一个数字// 计数器隐藏counter.classList.add('hide')// 完成 显示finalMessage.classList.add('show')}})})
}
// 重播按钮 点击
replay.addEventListener('click', () => {// 初始化resetDOM()// 执行动画runAnimation()
})