1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disco Bulb Animation</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #000000, #111111);
font-family: Arial, sans-serif;
}
.container {
display: flex;
gap: 200px;
}
.wall {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
padding: 15px;
border-radius: 10px;
background: rgba(96, 95, 95, 0.281);
backdrop-filter: blur(10px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.bulb {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
backdrop-filter: blur(10px);
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.1);
transition: box-shadow 0.3s, background-color 0.3s;
}
.bulb.glow {
animation: disco 0.2s infinite alternate;
}
@keyframes disco {
0% {
background-color: rgba(255, 0, 128, 0.8);
box-shadow: 0 0 40px 40px rgba(255, 0, 128, 0.8);
}
25% {
background-color: rgba(0, 255, 128, 0.8);
box-shadow: 0 0 30px 10px rgba(0, 255, 128, 0.8);
}
50% {
background-color: rgba(0, 128, 255, 0.8);
box-shadow: 0 0 30px 10px rgba(0, 128, 255, 0.8);
}
75% {
background-color: rgba(255, 255, 0, 0.8);
box-shadow: 0 0 30px 10px rgba(255, 255, 0, 0.8);
}
100% {
background-color: rgba(255, 128, 0, 0.8);
box-shadow: 0 0 30px 10px rgba(255, 128, 0, 0.8);
}
}
.start-button {
position: absolute;
bottom: 50px;
padding: 15px 30px;
background: #ff5722;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
transition: background 0.3s;
}
.start-button:hover {
background: #ff784e;
}
</style>
</head>
<body>
<div class="container">
<div class="wall">
<div class="bulb" id="left-bulb-1"></div>
<div class="bulb" id="left-bulb-2"></div>
<div class="bulb" id="left-bulb-3"></div>
</div>
<div class="wall">
<div class="bulb" id="right-bulb-1"></div>
<div class="bulb" id="right-bulb-2"></div>
<div class="bulb" id="right-bulb-3"></div>
</div>
</div>
<button class="start-button" onclick="startDisco()">
Start</button>
<script>
async function startDisco() {
const leftBulbs = [
document.getElementById("left-bulb-1"),
document.getElementById("left-bulb-2"),
document.getElementById("left-bulb-3"),
];
const rightBulbs = [
document.getElementById("right-bulb-1"),
document.getElementById("right-bulb-2"),
document.getElementById("right-bulb-3"),
];
// Function to glow a bulb for 3 seconds
async function glowBulb(bulb) {
bulb.classList.add("glow");
await new Promise((resolve) =>
setTimeout(resolve, 3000));
bulb.classList.remove("glow");
}
// Glow bulbs on the left wall
for (let bulb of leftBulbs) {
await glowBulb(bulb);
}
// Glow bulbs on the right wall
for (let bulb of rightBulbs) {
await glowBulb(bulb);
}
}
</script>
</body>
</html>
以上就是✨ 带有玻璃变形效果的发光迪斯科灯泡动画！ ✨ 代码 HTML CSS 和 JAVASCRIPT的详细内容，更多请关注php中文网其它相关文章！