<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>翻页时钟特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
font-family: 'Arial', sans-serif;
margin: 0;
overflow: hidden;
}
.clock-container {
display: flex;
gap: 10px;
perspective: 1000px;
}
.time-section {
display: flex;
flex-direction: column;
align-items: center;
}
.time-label {
color: #666;
font-size: 16px;
margin-bottom: 10px;
text-transform: uppercase;
}
.flip-container {
position: relative;
width: 100px;
height: 150px;
margin: 0 5px;
}
.flip-card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.flip-card.flipping {
transform: rotateX(-180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.flip-card-front {
background-color: #333;
}
.flip-card-back {
background-color: #444;
transform: rotateX(180deg);
}
.top-half, .bottom-half {
position: absolute;
width: 100%;
height: 50%;
overflow: hidden;
border-radius: 8px 8px 0 0;
}
.bottom-half {
top: 50%;
border-radius: 0 0 8px 8px;
}
.top-half::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}
.footer {
position: absolute;
bottom: 20px;
color: #666;
font-size: 12px;
}
.footer a {
color: #888;
text-decoration: none;
}
.footer a:hover {
color: #aaa;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="time-section">
<div class="time-label">小时</div>
<div class="flip-container">
<div class="top-half" id="hour-tens-top"></div>
<div class="bottom-half" id="hour-tens-bottom"></div>
<div class="flip-card" id="hour-tens-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
<div class="flip-container">
<div class="top-half" id="hour-ones-top"></div>
<div class="bottom-half" id="hour-ones-bottom"></div>
<div class="flip-card" id="hour-ones-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
</div>
<div class="time-section">
<div class="time-label">分钟</div>
<div class="flip-container">
<div class="top-half" id="min-tens-top"></div>
<div class="bottom-half" id="min-tens-bottom"></div>
<div class="flip-card" id="min-tens-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
<div class="flip-container">
<div class="top-half" id="min-ones-top"></div>
<div class="bottom-half" id="min-ones-bottom"></div>
<div class="flip-card" id="min-ones-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
</div>
<div class="time-section">
<div class="time-label">秒钟</div>
<div class="flip-container">
<div class="top-half" id="sec-tens-top"></div>
<div class="bottom-half" id="sec-tens-bottom"></div>
<div class="flip-card" id="sec-tens-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
<div class="flip-container">
<div class="top-half" id="sec-ones-top"></div>
<div class="bottom-half" id="sec-ones-bottom"></div>
<div class="flip-card" id="sec-ones-flip">
<div class="flip-card-front">0</div>
<div class="flip-card-back">0</div>
</div>
</div>
</div>
</div>
<div class="footer">
</div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
// 更新小时
updateDigit('hour-tens', hours[0]);
updateDigit('hour-ones', hours[1]);
// 更新分钟
updateDigit('min-tens', minutes[0]);
updateDigit('min-ones', minutes[1]);
// 更新秒钟
updateDigit('sec-tens', seconds[0]);
updateDigit('sec-ones', seconds[1]);
}
function updateDigit(prefix, newValue) {
const topEl = document.getElementById(`${prefix}-top`);
const bottomEl = document.getElementById(`${prefix}-bottom`);
const flipEl = document.getElementById(`${prefix}-flip`);
const frontEl = flipEl.querySelector('.flip-card-front');
const backEl = flipEl.querySelector('.flip-card-back');
const currentValue = frontEl.textContent;
if (currentValue !== newValue) {
// 设置翻转前的值
topEl.textContent = currentValue;
bottomEl.textContent = newValue;
// 设置翻转卡片的值
frontEl.textContent = currentValue;
backEl.textContent = newValue;
// 触发翻转动画
flipEl.classList.remove('flipping');
void flipEl.offsetWidth; // 触发重绘
flipEl.classList.add('flipping');
// 动画结束后更新显示
setTimeout(() => {
frontEl.textContent = newValue;
topEl.textContent = newValue;
}, 500);
}
}
// 初始更新时钟
updateClock();
// 每秒更新一次
setInterval(updateClock, 1000);
</script>
</body>
</html>
扫一扫
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
