5、倒计时翻页效果
需求效果
完成一个倒计时，时分秒都对应可以进行翻动的效果
具体实现代码
html 部分
<!DOCTYPE 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" href="./index.css">
</head>
<body><div class="container"><h1>距离国庆还有</h1><div class="countdown"><div class="column"><div class="card-container" dataset="day"><div class="card card1"></div><div class="card card2"></div><div class="card card3"></div><div class="card card4"></div></div><span>天</span></div><div class="column"><div class="card-container" dataset="hour"><div class="card card1"></div><div class="card card2"></div><div class="card card3"></div><div class="card card4"></div></div><span>时</span></div><div class="column"><div class="card-container" dataset="min"><div class="card card1"></div><div class="card card2"></div><div class="card card3"></div><div class="card card4"></div></div><span>分</span></div><div class="column"><div class="card-container" dataset="second"><div class="card card1"></div><div class="card card2"></div><div class="card card3"></div><div class="card card4"></div></div><span>秒</span></div></div></div>
</body>
<script src="./index.js"></script>
</html>
css 部分
* {margin: 0;padding: 0;box-sizing: border-box;
}body {display: flex;align-items: flex-start;justify-content: center;height: 100vh;background-color: #353535;padding-top: 100px;font-size: 4em;color: #333;text-align: center;
}
.container {display: flex;flex-direction: column;align-items: center;justify-content: center;border-radius: 5px;background: linear-gradient( 90deg, rgba(203,224,220,0.3) 0%, rgba(215,231,224,0) 100%);
}
.countdown {width: 500px;display: flex;flex-direction: row;align-items: center;justify-content: space-around;
}
.card-container {background: #d7d7d7;width: 100px;height: 100px;position: relative;perspective: 500px;margin-right: 20px;
}
.card-container::before {content: "";position: absolute;left: 0;top: 50%;height: 2px;background: linear-gradient(to bottom, #000, #000 1px, #fff 1px);width: 100%;margin-top: -1px;z-index: 99;
}
.card {position: absolute;width: 100%;height: 50%;left: 0;top: 0;overflow: hidden;line-height: 100px;background: #d7d7d7;
}
.card1 {line-height: 100px;
}
.card2 {top: 50%;line-height: 0;transform: rotateX(180deg);transform-origin: center top;backface-visibility: hidden;z-index: 12;
}
.minute .card2 {transition: .5s;transform: rotateX(0deg);
}
.card3 {line-height: 100px;z-index: 11;transform-origin: center bottom;backface-visibility: hidden;
}
.minute .card3 {transition: .5s;transform: rotateX(180deg);
}
.card4 {top: 50%;line-height: 0;backface-visibility: hidden;
}
js部分
const cards = document.querySelectorAll('[dataset="second"] .card');const conDoms = document.querySelectorAll('.card-container');function getCountdownTime() {const now = new Date();const target = new Date(now.getFullYear(), 9, 1);const diff = target.getTime() - now.getTime();const days = Math.floor( diff / (1000 * 60 * 60 * 24));const hours = Math.floor(diff / (1000 * 60 * 60) % 24);const minutes = Math.floor(diff / (1000 * 60) % 60);const second = Math.floor(diff / (1000) % 60);console.log(conDoms, days, hours, minutes, second)conDoms.forEach((conDom, index) => {if (index === 0) {conDom.querySelectorAll('.card').forEach(card => card.innerText = days)} else if (index === 1) {conDom.querySelectorAll('.card').forEach(card => card.innerText = hours)} else if (index === 2) {conDom.querySelectorAll('.card').forEach(card => card.innerText = minutes)} else if (index === 3) {conDom.querySelectorAll('.card').forEach(card => card.innerText = second)}})countdownHandle(second, minutes, hours, days);}getCountdownTime()function countdownHandle(second, minutes, hours, days ) {setInterval(() => {second--;if(second < 0) {second = 59;minutes--conDoms[2].querySelectorAll('.card').forEach(card => card.innerText = minutes)conDoms[2].classList.add('minute');setTimeout(() => {conDoms[2].classList.remove('minute');}, 500);if(minutes < 0) {minutes = 59;hours--;conDoms[1].querySelectorAll('.card').forEach(card => card.innerText = hours)conDoms[1].classList.add('minute');setTimeout(() => {conDoms[1].classList.remove('minute');}, 500);if(hours < 0) {hours = 23;days--;conDoms[0].querySelectorAll('.card').forEach(card => card.innerText = days) // Update days displayif(days < 0) {days = 0;}conDoms[0].classList.add('minute');setTimeout(() => {conDoms[0].classList.remove('minute');}, 500);}}}cards.forEach((card, index) => {if (index <= 1) {card.innerText = second + 1 ;} else if (index > 1) {card.innerText = second}});conDoms[3].classList.add('minute');setTimeout(() => {conDoms[3].classList.remove('minute');}, 500);}, 1000);}