纯CSS3收音机动画特效

原创已于 2025-06-27 11:26:59 修改 · 413 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-16 14:47:51 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3收音机动画特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
}

.radio-container {
position: relative;
width: 300px;
height: 200px;
perspective: 1000px;
}

.radio {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}

.radio-body {
position: absolute;
width: 100%;
height: 100%;
background: #333;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
transform: translateZ(0);
overflow: hidden;
}

.radio-display {
position: absolute;
top: 20px;
left: 20px;
width: 260px;
height: 80px;
background: #222;
border-radius: 5px;
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
overflow: hidden;
}

.frequency {
position: absolute;
top: 10px;
left: 10px;
color: #0f0;
font-size: 16px;
font-family: 'Courier New', monospace;
text-shadow: 0 0 5px #0f0;
animation: frequency 5s infinite alternate;
}

.knob {
position: absolute;
width: 30px;
height: 30px;
background: #555;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

.knob-1 {
bottom: 20px;
left: 40px;
animation: knob-rotate 3s infinite linear;
}

.knob-2 {
bottom: 20px;
right: 40px;
animation: knob-rotate 4s infinite linear reverse;
}

.antenna {
position: absolute;
top: -50px;
right: 40px;
width: 5px;
height: 60px;
background: #555;
transform-origin: bottom center;
animation: antenna-swing 2s infinite alternate ease-in-out;
}

.antenna-top {
position: absolute;
top: -10px;
left: -5px;
width: 15px;
height: 15px;
background: #777;
border-radius: 50%;
}

.speaker {
position: absolute;
bottom: 70px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 30px;
background: #444;
border-radius: 5px;
display: flex;
justify-content: space-around;
align-items: center;
}

.speaker-line {
width: 5px;
height: 20px;
background: #222;
animation: speaker-pulse 0.5s infinite alternate;
}

.speaker-line:nth-child(1) { animation-delay: 0.1s; }
.speaker-line:nth-child(2) { animation-delay: 0.2s; }
.speaker-line:nth-child(3) { animation-delay: 0.3s; }
.speaker-line:nth-child(4) { animation-delay: 0.4s; }
.speaker-line:nth-child(5) { animation-delay: 0.5s; }

@keyframes rotate {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}

@keyframes frequency {
0% { content: "88.8 FM"; }
25% { content: "92.5 FM"; }
50% { content: "95.3 FM"; }
75% { content: "101.1 FM"; }
100% { content: "107.9 FM"; }
}

@keyframes knob-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

@keyframes antenna-swing {
0% { transform: rotate(-15deg); }
100% { transform: rotate(15deg); }
}

@keyframes speaker-pulse {
0% { height: 5px; }
100% { height: 20px; }
}

.frequency::before {
content: "88.8 FM";
animation: frequency 5s infinite alternate;
}

/* 插入的链接样式 */
.link {
position: absolute;
bottom: 20px;
color: white;
text-decoration: none;
font-size: 12px;
opacity: 0.5;
transition: opacity 0.3s;
}

.link:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="radio-container">
<div class="radio">
<div class="radio-body">
<div class="radio-display">
<div class="frequency"></div>
</div>
<div class="knob knob-1"></div>
<div class="knob knob-2"></div>
<div class="antenna">
<div class="antenna-top"></div>
</div>
<div class="speaker">
<div class="speaker-line"></div>
<div class="speaker-line"></div>
<div class="speaker-line"></div>
<div class="speaker-line"></div>
<div class="speaker-line"></div>
</div>
</div>
</div>
</div>


</body>
</html>