CSS3 SVG实现10秒倒计时特效

原创已于 2025-06-27 10:52:05 修改 · 555 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-24 13:23:35 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 SVG实现10秒倒计时特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
font-family: 'Arial', sans-serif;
color: white;
}

.countdown-container {
position: relative;
width: 300px;
height: 300px;
margin-bottom: 30px;
}

.countdown-number {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
font-weight: bold;
color: #ff4757;
text-shadow: 0 0 10px rgba(255, 71, 87, 0.7);
}

.countdown-circle {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}

.countdown-circle-bg {
fill: none;
stroke: #444;
stroke-width: 10;
}

.countdown-circle-fg {
fill: none;
stroke: #ff4757;
stroke-width: 10;
stroke-linecap: round;
stroke-dasharray: 880;
stroke-dashoffset: 880;
animation: countdown 10s linear forwards;
}

@keyframes countdown {
from {
stroke-dashoffset: 880;
}
to {
stroke-dashoffset: 0;
}
}

.countdown-text {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
color: #ddd;
}

.restart-btn {
padding: 12px 24px;
background: #ff4757;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 10px rgba(255, 71, 87, 0.5);
}

.restart-btn:hover {
background: #ff6b81;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 71, 87, 0.7);
}

.credit {
position: fixed;
bottom: 20px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}

.credit a {
color: #ff4757;
text-decoration: none;
}
</style>
</head>
<body>
<div class="countdown-text">倒计时开始</div>

<div class="countdown-container">
<div class="countdown-number">10</div>
<svg class="countdown-circle" viewBox="0 0 300 300">
<circle class="countdown-circle-bg" cx="150" cy="150" r="140"></circle>
<circle class="countdown-circle-fg" cx="150" cy="150" r="140"></circle>
</svg>
</div>

<button class="restart-btn" id="restart-btn">重新开始</button>

<script>
const countdownNumber = document.querySelector('.countdown-number');
const countdownText = document.querySelector('.countdown-text');
const restartBtn = document.getElementById('restart-btn');

// 数字倒计时
function updateCountdown() {
let count = 10;
const interval = setInterval(() => {
countdownNumber.textContent = count;
countdownText.textContent = count === 0 ? '倒计时结束！' : `倒计时: ${count}秒`;

if (count === 0) {
clearInterval(interval);
// 倒计时结束动画
countdownNumber.style.animation = 'pulse 0.5s 3';
}
count--;
}, 1000);
}

// 重新开始倒计时
restartBtn.addEventListener('click', () => {
// 重置SVG动画
const circleFg = document.querySelector('.countdown-circle-fg');
circleFg.style.animation = 'none';
void circleFg.offsetWidth; // 触发重绘
circleFg.style.animation = 'countdown 10s linear forwards';

// 重置数字倒计时
countdownNumber.textContent = '10';
countdownNumber.style.animation = 'none';
countdownText.textContent = '倒计时开始';

updateCountdown();
});

// 初始启动倒计时
updateCountdown();

// 添加脉冲动画
const style = document.createElement('style');
style.textContent = `
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>