Skip to content

Commit 99021c5

Browse files
simonwsimonw
authored
Create animated-rainbow-border.html
https://gist.github.com/simonw/2e56ee84e7321592f79ceaed2e81b0a9
1 parent 5f72442 commit 99021c5

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎animated-rainbow-border.html

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
body {
6+
display: flex;
7+
flex-direction: column;
8+
gap: 20px;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
margin: 0;
13+
background: #1a1a1a;
14+
}
15+
16+
.rainbow-box {
17+
position: relative;
18+
width: 300px;
19+
height: 200px;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
background: #2a2a2a;
24+
border-radius: 10px;
25+
}
26+
27+
.rainbow-box::before {
28+
content: '';
29+
position: absolute;
30+
top: -3px;
31+
left: -3px;
32+
right: -3px;
33+
bottom: -3px;
34+
background: linear-gradient(
35+
45deg,
36+
#ff0000,
37+
#ff8000,
38+
#ffff00,
39+
#00ff00,
40+
#00ffff,
41+
#0000ff,
42+
#8000ff,
43+
#ff0080,
44+
#ff0000
45+
);
46+
background-size: 200% 200%;
47+
border-radius: 12px;
48+
z-index: -1;
49+
filter: blur(6px);
50+
opacity: 0;
51+
transform: scale(0.95);
52+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
53+
}
54+
55+
.rainbow-box.animated::before {
56+
opacity: 1;
57+
transform: scale(1);
58+
animation: gradient 1.5s ease infinite,
59+
pulse 2s ease-in-out infinite;
60+
}
61+
62+
.rainbow-box::after {
63+
content: '';
64+
position: absolute;
65+
inset: 2px;
66+
background: #2a2a2a;
67+
border-radius: 8px;
68+
z-index: 0;
69+
}
70+
71+
.content {
72+
color: white;
73+
font-family: system-ui, sans-serif;
74+
font-size: 24px;
75+
text-align: center;
76+
position: relative;
77+
z-index: 1;
78+
}
79+
80+
.toggle-button {
81+
padding: 12px 24px;
82+
font-size: 16px;
83+
color: white;
84+
background: #444;
85+
border: none;
86+
border-radius: 6px;
87+
cursor: pointer;
88+
transition: all 0.3s ease;
89+
}
90+
91+
.toggle-button:hover {
92+
background: #555;
93+
transform: translateY(-2px);
94+
}
95+
96+
.toggle-button:active {
97+
background: #333;
98+
transform: translateY(0px);
99+
}
100+
101+
@keyframes gradient {
102+
0% {
103+
background-position: 0% 50%;
104+
}
105+
50% {
106+
background-position: 100% 50%;
107+
}
108+
100% {
109+
background-position: 0% 50%;
110+
}
111+
}
112+
113+
@keyframes pulse {
114+
0% {
115+
opacity: 1;
116+
filter: blur(6px) brightness(1.2);
117+
}
118+
50% {
119+
opacity: 0.8;
120+
filter: blur(5px) brightness(1);
121+
}
122+
100% {
123+
opacity: 1;
124+
filter: blur(6px) brightness(1.2);
125+
}
126+
}
127+
</style>
128+
</head>
129+
<body>
130+
<div class="rainbow-box">
131+
<div class="content">Rainbow Border</div>
132+
</div>
133+
<button class="toggle-button" onclick="toggleAnimation()">Start Animation</button>
134+
135+
<script>
136+
function toggleAnimation() {
137+
const box = document.querySelector('.rainbow-box');
138+
const button = document.querySelector('.toggle-button');
139+
140+
box.classList.toggle('animated');
141+
button.textContent = box.classList.contains('animated') ?
142+
'Stop Animation' : 'Start Animation';
143+
}
144+
</script>
145+
</body>
146+
</html>

0 commit comments

Comments
 (0)