Skip to content

Commit 9ba09af

Browse files
codingstellacodingstella
authored
Add files via upload
0 parents  commit 9ba09af

34 files changed

+1617
-0
lines changed

‎10 Different Pulse Effect/10 Different Pulse Effect.zip

1.82 KB
Binary file not shown.

‎10 Different Pulse Effect/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - The pulsing</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="pulsing-1"></div>
12+
<div class="pulsing-2"></div>
13+
<div class="pulsing-3"></div>
14+
<div class="pulsing-4"></div>
15+
<div class="pulsing-5"></div>
16+
<div class="pulsing-6"></div>
17+
<div class="pulsing-7"></div>
18+
<div class="pulsing-8"></div>
19+
<div class="pulsing-9"></div>
20+
<div class="pulsing-10" data-c="💯"></div>
21+
<!-- partial -->
22+
23+
</body>
24+
</html>

‎10 Different Pulse Effect/style.css

+243
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
.pulsing-1 {
2+
width:20px;
3+
height:20px;
4+
border-radius: 50%;
5+
background:#000;
6+
box-shadow: 0 0 0 0 #0004;
7+
animation:pl1 1s infinite;
8+
}
9+
@keyframes pl1 {
10+
100% {box-shadow: 0 0 0 30px #0000}
11+
}
12+
13+
.pulsing-2 {
14+
width:20px;
15+
height:20px;
16+
border-radius: 50%;
17+
background:#000;
18+
box-shadow: 0 0 0 0 #0004;
19+
animation:pl2 1.5s infinite linear;
20+
position: relative;
21+
}
22+
.pulsing-2:before,
23+
.pulsing-2:after {
24+
content:"";
25+
position: absolute;
26+
inset:0;
27+
border-radius: inherit;
28+
box-shadow: 0 0 0 0 #0004;
29+
animation: inherit;
30+
animation-delay: -0.5s;
31+
}
32+
.pulsing-2:after {
33+
animation-delay: -1s;
34+
}
35+
@keyframes pl2 {
36+
100% {box-shadow: 0 0 0 40px #0000}
37+
}
38+
39+
.pulsing-3 {
40+
width:50px;
41+
height:50px;
42+
color:#dc1818;
43+
background:
44+
radial-gradient(circle at 60% 65%, currentColor 62%, #0000 65%) top left,
45+
radial-gradient(circle at 40% 65%, currentColor 62%, #0000 65%) top right,
46+
linear-gradient(to bottom left, currentColor 42%,#0000 43%) bottom left ,
47+
linear-gradient(to bottom right,currentColor 42%,#0000 43%) bottom right;
48+
background-size:50% 50%;
49+
background-repeat:no-repeat;
50+
position:relative;
51+
}
52+
.pulsing-3:after {
53+
content:"";
54+
position:absolute;
55+
inset:0;
56+
background:inherit;
57+
opacity:0.4;
58+
animation:pl3 1s infinite;
59+
}
60+
@keyframes pl3 {
61+
to {transform:scale(1.8);opacity:0}
62+
}
63+
64+
.pulsing-4 {
65+
width:60px;
66+
height:60px;
67+
position:relative;
68+
}
69+
.pulsing-4:before,
70+
.pulsing-4:after {
71+
content:"";
72+
position:absolute;
73+
border-radius: 50%;
74+
inset:0;
75+
background:
76+
radial-gradient(circle 10px,#f85c00 94%,#0000),
77+
repeating-conic-gradient(from -30deg,#0000 0 60deg,#f85c00 61deg 120deg);
78+
-webkit-mask:radial-gradient(circle 15px,#000 calc(100% - 6px),#0000 calc(100% - 5px) 94%,#000);
79+
}
80+
81+
.pulsing-4:after {
82+
animation:pl4 1s infinite;
83+
transform: perspective(300px) translateZ(0px)
84+
}
85+
86+
@keyframes pl4 {
87+
to {transform:perspective(300px) translateZ(150px);opacity:0}
88+
}
89+
90+
91+
92+
.pulsing-5 {
93+
width:80px;
94+
height:80px;
95+
position:relative;
96+
}
97+
.pulsing-5:before,
98+
.pulsing-5:after {
99+
content:"";
100+
position:absolute;
101+
inset:0;
102+
background:#ffb940;
103+
box-shadow: 0 0 0 50px;
104+
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
105+
}
106+
107+
.pulsing-5:after {
108+
animation:pl5 1s infinite;
109+
transform:perspective(300px) translateZ(0px)
110+
}
111+
112+
@keyframes pl5 {
113+
to {transform:perspective(300px) translateZ(150px);opacity:0}
114+
}
115+
116+
.pulsing-6 {
117+
width:40px;
118+
height:40px;
119+
position:relative;
120+
transform:rotate(45deg);
121+
}
122+
.pulsing-6:before,
123+
.pulsing-6:after {
124+
content:"";
125+
position:absolute;
126+
inset:0;
127+
border-radius: 50% 50% 0 50%;
128+
background:#514b82;
129+
-webkit-mask:radial-gradient(circle 10px at 50% 50%,#0000 94%,#000);
130+
}
131+
132+
.pulsing-6:after {
133+
animation:pl6 1s infinite;
134+
transform: perspective(300px) translateZ(0px)
135+
}
136+
137+
@keyframes pl6 {
138+
to {transform:perspective(300px) translateZ(150px);opacity:0}
139+
}
140+
141+
.pulsing-7 {
142+
width: 108px;
143+
height: 60px;
144+
color:#269af2;
145+
--c:radial-gradient(farthest-side,currentColor 96%,#0000);
146+
background:
147+
var(--c) 100% 100% /30% 60%,
148+
var(--c) 70% 0 /50% 100%,
149+
var(--c) 0 100% /36% 68%,
150+
var(--c) 27% 18% /26% 40%,
151+
linear-gradient(currentColor 0 0) bottom/67% 58%;
152+
background-repeat: no-repeat;
153+
position: relative;
154+
}
155+
156+
.pulsing-7:after {
157+
content:"";
158+
position:absolute;
159+
inset:0;
160+
background:inherit;
161+
opacity:0.4;
162+
animation:pl7 1s infinite;
163+
}
164+
@keyframes pl7 {
165+
to {transform:scale(1.8);opacity:0}
166+
}
167+
168+
.pulsing-8 {
169+
width:65px;
170+
height:117px;
171+
position:relative;
172+
}
173+
.pulsing-8:before,
174+
.pulsing-8:after {
175+
content:"";
176+
position:absolute;
177+
inset:0;
178+
background:#ff8001;
179+
box-shadow: 0 0 0 50px;
180+
clip-path: polygon(100% 0, 23% 46%, 46% 44%, 15% 69%, 38% 67%, 0 100%, 76% 57%, 53% 58%, 88% 33%, 60% 37%);;
181+
}
182+
183+
.pulsing-8:after {
184+
animation:pl8 1s infinite;
185+
transform:perspective(300px) translateZ(0px)
186+
}
187+
188+
@keyframes pl8 {
189+
to {transform:perspective(300px) translateZ(180px);opacity:0}
190+
}
191+
.pulsing-9 {
192+
width:100px;
193+
height:45px;
194+
position:relative;
195+
}
196+
.pulsing-9:before,
197+
.pulsing-9:after {
198+
content:"";
199+
position:absolute;
200+
inset:0;
201+
background:#000;
202+
box-shadow: 0 0 0 50px;
203+
clip-path: polygon(-50px -20px,10% -12px,20% 0,calc(50% - 15px) 0,calc(50% - 10px) -20px,calc(50% - 8px) -15px,calc(50% + 8px) -15px,calc(50% + 10px) -20px,calc(50% + 15px) 0,80% 0,90% -12px,calc(100% + 50px) -20px,100% 80%,calc(100% + 10px) calc(100% + 10px),60% 100%,50% calc(100% + 15px),40% 100%,-10px calc(100% + 10px),0 80%);
204+
}
205+
206+
.pulsing-9:after {
207+
animation:pl9 1s infinite;
208+
transform:perspective(300px) translateZ(0px)
209+
}
210+
211+
@keyframes pl9 {
212+
to {transform:perspective(300px) translateZ(100px);opacity:0}
213+
}
214+
215+
.pulsing-10 {
216+
display: grid;
217+
font-size: 50px;
218+
}
219+
.pulsing-10:before,
220+
.pulsing-10:after {
221+
content:attr(data-c);
222+
grid-area: 1/1;
223+
}
224+
225+
.pulsing-10:after {
226+
animation:pl10 1s infinite;
227+
}
228+
229+
@keyframes pl10 {
230+
to {transform:scale(1.8);opacity:0}
231+
}
232+
233+
/**/
234+
body {
235+
display: grid;
236+
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
237+
grid-auto-rows: 130px;
238+
place-items:center;
239+
}
240+
241+
* {
242+
box-sizing: border-box;
243+
}

‎10 Different Spinner/10 Different Spinner.zip

1.47 KB
Binary file not shown.

‎10 Different Spinner/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - The Spinner</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="spinner-1"></div>
12+
<div class="spinner-2"></div>
13+
<div class="spinner-3"></div>
14+
<div class="spinner-4"></div>
15+
<div class="spinner-5"></div>
16+
<div class="spinner-6"></div>
17+
<div class="spinner-7"></div>
18+
<div class="spinner-8"></div>
19+
<div class="spinner-9"></div>
20+
<div class="spinner-10"></div>
21+
<!-- partial -->
22+
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)