瓦斯灯泡动画特效

ziblog

已于 2025-06-27 11:22:48 修改

阅读量460

点赞数 14

CC 4.0 BY-SA版权

文章标签： css css3 前端

于 2025-06-17 13:54:00 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148714264

<!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 {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a2e;
overflow: hidden;
font-family: Arial, sans-serif;
}

.bulb-container {
position: relative;
width: 200px;
height: 400px;
}

.bulb {
width: 100%;
height: 100%;
filter: drop-shadow(0 0 30px rgba(255, 200, 50, 0.7));
}

.flame {
position: absolute;
width: 60px;
height: 120px;
top: 120px;
left: 70px;
animation: flicker 3s ease-in-out infinite alternate;
transform-origin: center bottom;
}

.flame-inner {
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center,
rgba(255, 200, 50, 0.9) 0%,
rgba(255, 100, 0, 0.7) 50%,
rgba(255, 50, 0, 0) 100%);
border-radius: 50% 50% 20% 20%;
filter: blur(5px);
animation: pulse 2s ease-in-out infinite alternate;
}

.glow {
position: absolute;
width: 200px;
height: 200px;
background: radial-gradient(circle,
rgba(255, 220, 100, 0.4) 0%,
rgba(255, 150, 50, 0.2) 50%,
rgba(255, 100, 0, 0) 100%);
border-radius: 50%;
top: 100px;
left: 0;
animation: glow-pulse 3s ease-in-out infinite alternate;
z-index: -1;
}

@keyframes flicker {
0%, 100% {
transform: rotate(-5deg) scaleY(1);
height: 120px;
}
25% {
transform: rotate(5deg) scaleY(1.1);
height: 130px;
}
50% {
transform: rotate(-3deg) scaleY(0.9);
height: 110px;
}
75% {
transform: rotate(2deg) scaleY(1.05);
height: 125px;
}
}

@keyframes pulse {
0%, 100% {
opacity: 0.9;
}
50% {
opacity: 1;
}
}

@keyframes glow-pulse {
0%, 100% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 0.9;
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255, 200, 50, 0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0, 0, 0, 0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: rgba(255, 200, 50, 1);
background: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="bulb-container">
<svg class="bulb" viewBox="0 0 200 400" xmlns="http://www.w3.org/2000/svg">

<path d="M100 50 L120 70 L80 70 Z" fill="#b87333" />
<rect x="90" y="70" width="20" height="30" fill="#b87333" />


<path d="M60 100 Q100 50 140 100 Q170 150 170 200 Q170 250 140 300 Q100 350 60 300 Q30 250 30 200 Q30 150 60 100 Z"
fill="url(#glassGradient)" stroke="#cccccc" stroke-width="2" />


<circle cx="100" cy="200" r="40" fill="url(#innerGlassGradient)" />


<rect x="80" y="300" width="40" height="50" fill="#b87333" />
<rect x="85" y="350" width="30" height="50" fill="#8b4513" />


<defs>
<linearGradient id="glassGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#f5f5f5" stop-opacity="0.8" />
<stop offset="100%" stop-color="#e0e0e0" stop-opacity="0.6" />
</linearGradient>

<radialGradient id="innerGlassGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="#ffffcc" stop-opacity="0.3" />
<stop offset="100%" stop-color="#ffffff" stop-opacity="0" />
</radialGradient>
</defs>
</svg>

<div class="flame">
<div class="flame-inner"></div>
</div>

<div class="glow"></div>
</div>


</body>
</html>