CSS3抖音网红文字时钟特效

原创已于 2025-06-27 11:29:23 修改 · 829 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-14 13:09:27 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3抖音网红文字时钟特效</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
}

.clock-container {
position: relative;
width: 100%;
max-width: 800px;
text-align: center;
}

.time {
font-size: 8vw;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 30px #ff00ff,
0 0 40px #00ffff,
0 0 70px #00ffff,
0 0 80px #00ffff;
animation: glitch 1s linear infinite;
margin-bottom: 20px;
}

.date {
font-size: 3vw;
color: #fff;
text-shadow: 0 0 5px #00ff00,
0 0 10px #00ff00;
animation: glitch-small 2s linear infinite;
margin-bottom: 30px;
}

.weekday {
font-size: 4vw;
color: #fff;
text-shadow: 0 0 5px #ffff00,
0 0 10px #ffff00;
animation: color-change 5s linear infinite;
}

@keyframes glitch {
0%, 100% {
text-shadow: 0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 30px #ff00ff,
0 0 40px #00ffff,
0 0 70px #00ffff,
0 0 80px #00ffff;
transform: translate(0);
}
20% {
text-shadow: 0 0 10px #00ffff,
0 0 20px #00ffff,
0 0 30px #00ffff,
0 0 40px #ff00ff,
0 0 70px #ff00ff,
0 0 80px #ff00ff;
transform: translate(-2px, 2px);
}
40% {
text-shadow: 0 0 10px #ff00ff,
0 0 20px #00ffff,
0 0 30px #ff00ff,
0 0 40px #00ffff,
0 0 70px #ff00ff,
0 0 80px #00ffff;
transform: translate(2px, -2px);
}
60% {
text-shadow: 0 0 10px #00ffff,
0 0 20px #ff00ff,
0 0 30px #00ffff,
0 0 40px #ff00ff,
0 0 70px #00ffff,
0 0 80px #ff00ff;
transform: translate(-2px, -2px);
}
80% {
text-shadow: 0 0 10px #ff00ff,
0 0 20px #ff00ff,
0 0 30px #00ffff,
0 0 40px #00ffff,
0 0 70px #ff00ff,
0 0 80px #ff00ff;
transform: translate(2px, 2px);
}
}

@keyframes glitch-small {
0%, 100% {
transform: translate(0);
}
25% {
transform: translate(-1px, 1px);
}
50% {
transform: translate(1px, -1px);
}
75% {
transform: translate(-1px, -1px);
}
}

@keyframes color-change {
0% {
color: #ff00ff;
text-shadow: 0 0 5px #ff00ff,
0 0 10px #ff00ff;
}
25% {
color: #00ffff;
text-shadow: 0 0 5px #00ffff,
0 0 10px #00ffff;
}
50% {
color: #ffff00;
text-shadow: 0 0 5px #ffff00,
0 0 10px #ffff00;
}
75% {
color: #00ff00;
text-shadow: 0 0 5px #00ff00,
0 0 10px #00ff00;
}
100% {
color: #ff00ff;
text-shadow: 0 0 5px #ff00ff,
0 0 10px #ff00ff;
}
}

.noise {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 2px, 3px 100%;
pointer-events: none;
z-index: 10;
opacity: 0.3;
}

/* 插入的链接样式 */
.hidden-link {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.3);
font-size: 12px;
text-decoration: none;
z-index: 100;
}
</style>
</head>
<body>
<div class="noise"></div>
<div class="clock-container">
<div class="time" id="time">00:00:00</div>
<div class="date" id="date">2023年1月1日</div>
<div class="weekday" id="weekday">星期一</div>
</div>


<script>
function updateClock() {
const now = new Date();

// 更新时间
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;

// 更新日期
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
document.getElementById('date').textContent = `${year}年${month}月${day}日`;

// 更新星期
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = weekdays[now.getDay()];
document.getElementById('weekday').textContent = weekday;
}

// 初始更新
updateClock();

// 每秒更新一次
setInterval(updateClock, 1000);
</script>
</body>
</html>