Skip to content

Commit 8031133

Browse files
Durgesh4993Durgesh4993
authored
Create Color Bullet Amimation in HTML
1 parent afea235 commit 8031133

File tree

1 file changed

+302
-0
lines changed

1 file changed

+302
-0
lines changed

‎Color Bullet Amimation in HTML

+302
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
---------------------------------------------------
2+
html-
3+
4+
HTML SCSS BabelResult Skip Results Iframe
5+
EDIT ON
6+
<div class="animation-container">
7+
<div class="lightning-container">
8+
<div class="lightning white"></div>
9+
<div class="lightning red"></div>
10+
</div>
11+
<div class="boom-container">
12+
<div class="shape circle big white"></div>
13+
<div class="shape circle white"></div>
14+
<div class="shape triangle big yellow"></div>
15+
<div class="shape disc white"></div>
16+
<div class="shape triangle blue"></div>
17+
</div>
18+
<div class="boom-container second">
19+
<div class="shape circle big white"></div>
20+
<div class="shape circle white"></div>
21+
<div class="shape disc white"></div>
22+
<div class="shape triangle blue"></div>
23+
</div>
24+
</div>
25+
26+
---------------------------------------------------
27+
css-
28+
29+
body {
30+
display: flex;
31+
align-items: center;
32+
position: relative;
33+
background: linear-gradient(to bottom right, #070630 0%,#060454 100%);
34+
min-height: 100vh;
35+
}
36+
37+
.animation-container {
38+
display: block;
39+
position: relative;
40+
width: 800px;
41+
max-width: 100%;
42+
margin: 0 auto;
43+
44+
.lightning-container {
45+
position: absolute;
46+
top: 50%;
47+
left: 0;
48+
display: flex;
49+
transform: translateY(-50%);
50+
51+
.lightning {
52+
position: absolute;
53+
display: block;
54+
height: 12px;
55+
width: 12px;
56+
border-radius: 12px;
57+
transform-origin: 6px 6px;
58+
59+
animation-name: woosh;
60+
animation-duration: 1.5s;
61+
animation-iteration-count: infinite;
62+
animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
63+
animation-direction: alternate;
64+
65+
&.white {
66+
background-color: white;
67+
box-shadow: 0px 50px 50px 0px transparentize(white, 0.7);
68+
}
69+
70+
&.red {
71+
background-color: #fc7171;
72+
box-shadow: 0px 50px 50px 0px transparentize(#fc7171, 0.7);
73+
animation-delay: 0.2s;
74+
}
75+
}
76+
}
77+
78+
79+
.boom-container {
80+
position: absolute;
81+
display: flex;
82+
width: 80px;
83+
height: 80px;
84+
text-align: center;
85+
align-items: center;
86+
transform: translateY(-50%);
87+
left: 200px;
88+
top: -145px;
89+
90+
.shape {
91+
display: inline-block;
92+
position: relative;
93+
opacity: 0;
94+
transform-origin: center center;
95+
96+
&.triangle {
97+
width: 0;
98+
height: 0;
99+
border-style: solid;
100+
transform-origin: 50% 80%;
101+
animation-duration: 1s;
102+
animation-timing-function: ease-out;
103+
animation-iteration-count: infinite;
104+
margin-left: -15px;
105+
border-width: 0 2.5px 5px 2.5px;
106+
border-color: transparent transparent #42e599 transparent;
107+
animation-name: boom-triangle;
108+
109+
&.big {
110+
margin-left: -25px;
111+
border-width: 0 5px 10px 5px;
112+
border-color: transparent transparent #fade28 transparent;
113+
animation-name: boom-triangle-big;
114+
}
115+
}
116+
117+
&.disc {
118+
width: 8px;
119+
height: 8px;
120+
border-radius: 100%;
121+
background-color: #d15ff4;
122+
animation-name: boom-disc;
123+
animation-duration: 1s;
124+
animation-timing-function: ease-out;
125+
animation-iteration-count: infinite;
126+
}
127+
128+
&.circle {
129+
width: 20px;
130+
height: 20px;
131+
animation-name: boom-circle;
132+
animation-duration: 1s;
133+
animation-timing-function: ease-out;
134+
animation-iteration-count: infinite;
135+
border-radius: 100%;
136+
margin-left: -30px;
137+
138+
&.white {
139+
border: 1px solid white;
140+
}
141+
142+
&.big {
143+
width: 40px;
144+
height: 40px;
145+
margin-left: 0px;
146+
147+
&.white {
148+
border: 2px solid white;
149+
}
150+
}
151+
}
152+
153+
&:after {
154+
background-color: rgba(178, 215, 232, 0.2);
155+
}
156+
}
157+
158+
.shape {
159+
&.triangle, &.circle, &.circle.big, &.disc {
160+
animation-delay: .38s;
161+
animation-duration: 3s;
162+
}
163+
164+
&.circle {
165+
animation-delay: 0.6s;
166+
}
167+
}
168+
169+
&.second {
170+
left: 485px;
171+
top: 155px;
172+
.shape {
173+
&.triangle, &.circle, &.circle.big, &.disc {
174+
animation-delay: 1.9s;
175+
}
176+
&.circle {
177+
animation-delay: 2.15s;
178+
}
179+
}
180+
}
181+
}
182+
}
183+
184+
@keyframes woosh {
185+
0% {
186+
width: 12px;
187+
transform: translate(0px, 0px) rotate(-35deg);
188+
}
189+
15% {
190+
width: 50px;
191+
}
192+
30% {
193+
width: 12px;
194+
transform: translate(214px, -150px) rotate(-35deg);
195+
}
196+
30.1% {
197+
transform: translate(214px, -150px) rotate(46deg);
198+
}
199+
50% {
200+
width: 110px;
201+
}
202+
70% {
203+
width: 12px;
204+
transform: translate(500px, 150px) rotate(46deg);
205+
}
206+
70.1% {
207+
transform: translate(500px, 150px) rotate(-37deg);
208+
}
209+
210+
85% {
211+
width: 50px;
212+
}
213+
100% {
214+
width: 12px;
215+
transform: translate(700px, 0) rotate(-37deg);
216+
}
217+
}
218+
219+
@keyframes boom-circle {
220+
0% {
221+
opacity: 0;
222+
}
223+
5% {
224+
opacity: 1;
225+
}
226+
30% {
227+
opacity: 0;
228+
transform: scale(3);
229+
}
230+
100% {
231+
}
232+
}
233+
234+
@keyframes boom-triangle-big {
235+
0% {
236+
opacity: 0;
237+
}
238+
5% {
239+
opacity: 1;
240+
}
241+
242+
40% {
243+
opacity: 0;
244+
transform: scale(2.5) translate(50px, -50px) rotate(360deg);
245+
}
246+
100% {
247+
}
248+
}
249+
250+
@keyframes boom-triangle {
251+
0% {
252+
opacity: 0;
253+
}
254+
5% {
255+
opacity: 1;
256+
}
257+
258+
30% {
259+
opacity: 0;
260+
transform: scale(3) translate(20px, 40px) rotate(360deg);
261+
}
262+
263+
100% {
264+
}
265+
}
266+
267+
@keyframes boom-disc {
268+
0% {
269+
opacity: 0;
270+
}
271+
5% {
272+
opacity: 1;
273+
}
274+
40% {
275+
opacity: 0;
276+
transform: scale(2) translate(-70px, -30px);
277+
}
278+
100% {
279+
280+
}
281+
}
282+
283+
284+
// FOOTER
285+
.footer {
286+
color: white;
287+
font-size: 10px;
288+
position: fixed;
289+
bottom: 0;
290+
font-weight: 200;
291+
padding: 10px 20px;
292+
293+
a {
294+
&,
295+
&:hover,
296+
&:focus,
297+
&:visited {
298+
color: #c6c6c6;
299+
}
300+
}
301+
}
302+

0 commit comments

Comments
 (0)