Skip to content

Commit f22a3b2

Browse files
jh3yjh3y
committed
Add worm loader with curved path
1 parent 0d6adb1 commit f22a3b2

File tree

3 files changed

+170
-0
lines changed

3 files changed

+170
-0
lines changed

‎public/18.worm-loader-with-curved-path/css/style.css

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
.wrapper {
2+
-webkit-animation: x 1s ease-in-out alternate infinite 0s both;
3+
animation: x 1s ease-in-out alternate infinite 0s both;
4+
}
5+
6+
.wrapper > div {
7+
-webkit-animation: y 1s linear infinite 0s both;
8+
animation: y 1s linear infinite 0s both;
9+
}
10+
11+
.wrapper:nth-of-type(2),
12+
.wrapper:nth-of-type(2) > div {
13+
-webkit-animation-delay: 0.1s;
14+
animation-delay: 0.1s;
15+
}
16+
.wrapper:nth-of-type(3),
17+
.wrapper:nth-of-type(3) > div {
18+
-webkit-animation-delay: 0.2s;
19+
animation-delay: 0.2s;
20+
}
21+
.wrapper:nth-of-type(4),
22+
.wrapper:nth-of-type(4) > div {
23+
-webkit-animation-delay: 0.3s;
24+
animation-delay: 0.3s;
25+
}
26+
.wrapper:nth-of-type(5),
27+
.wrapper:nth-of-type(5) > div {
28+
-webkit-animation-delay: 0.4s;
29+
animation-delay: 0.4s;
30+
}
31+
32+
33+
@-webkit-keyframes x {
34+
0% {
35+
-webkit-transform: translate(-100px, 0);
36+
transform: translate(-100px, 0);
37+
}
38+
100% {
39+
-webkit-transform: translate(100px, 0);
40+
transform: translate(100px, 0)
41+
}
42+
}
43+
44+
@keyframes x {
45+
0% {
46+
-webkit-transform: translate(-100px, 0);
47+
transform: translate(-100px, 0);
48+
}
49+
100% {
50+
-webkit-transform: translate(100px, 0);
51+
transform: translate(100px, 0)
52+
}
53+
}
54+
55+
56+
@-webkit-keyframes y {
57+
25% {
58+
-webkit-transform: translate(0, -50px);
59+
transform: translate(0, -50px);
60+
}
61+
0%, 50%, 100% {
62+
-webkit-transform: translate(0, 0);
63+
transform: translate(0, 0);
64+
}
65+
75% {
66+
-webkit-transform: translate(0, 50px);
67+
transform: translate(0, 50px);
68+
}
69+
70+
}
71+
72+
73+
@keyframes y {
74+
25% {
75+
-webkit-transform: translate(0, -50px);
76+
transform: translate(0, -50px);
77+
}
78+
0%, 50%, 100% {
79+
-webkit-transform: translate(0, 0);
80+
transform: translate(0, 0);
81+
}
82+
75% {
83+
-webkit-transform: translate(0, 50px);
84+
transform: translate(0, 50px);
85+
}
86+
87+
}

‎public/18.worm-loader-with-curved-path/index.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>18. Worm loader with curved path 🐛</title>
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
7+
<link rel="stylesheet" href="css/style.css">
8+
</head>
9+
10+
<body>
11+
<style>
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
html,
17+
body {
18+
align-items: center;
19+
background: linear-gradient(45deg, #d91e18, #9a12b3);
20+
display: flex;
21+
justify-content: center;
22+
margin: 0;
23+
min-height: 100vh;
24+
padding: 0;
25+
width: 100vw;
26+
}
27+
28+
.wrapper {
29+
position: absolute;
30+
}
31+
32+
.wrapper:nth-of-type(2)>div {
33+
height: 40px;
34+
width: 40px;
35+
opacity: 0.8;
36+
}
37+
38+
.wrapper:nth-of-type(3)>div {
39+
height: 30px;
40+
width: 30px;
41+
opacity: 0.6;
42+
}
43+
44+
.wrapper:nth-of-type(4)>div {
45+
height: 20px;
46+
width: 20px;
47+
opacity: 0.4;
48+
}
49+
50+
.wrapper:nth-of-type(5)>div {
51+
height: 10px;
52+
width: 10px;
53+
opacity: 0.2;
54+
}
55+
56+
div>div {
57+
background: #fff;
58+
border-radius: 100%;
59+
height: 50px;
60+
margin: 40px;
61+
width: 50px;
62+
}
63+
</style>
64+
<div class='wrapper'>
65+
<div></div>
66+
</div>
67+
<div class='wrapper'>
68+
<div></div>
69+
</div>
70+
<div class='wrapper'>
71+
<div></div>
72+
</div>
73+
<div class='wrapper'>
74+
<div></div>
75+
</div>
76+
<div class='wrapper'>
77+
<div></div>
78+
</div>
79+
</body>
80+
</html>

‎public/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,9 @@ <h1>A Guide to CSS Animation 📽</h1>
9393
<li>
9494
<a href='/17.dynamic-delays-with-animationend/' target='_blank'>Dynamic delays with animationend</a>
9595
</li>
96+
<li>
97+
<a href='/18.worm-loader-with-curved-path/' target='_blank'>Worm Loader with curved path</a>
98+
</li>
9699
</ol>
97100
</body>
98101
</html>

0 commit comments

Comments
 (0)