Skip to content

Commit 46d26bd

Browse files
ekachaijakekachaijak
authored
added my animation (#2974)
1 parent 3b0d23f commit 46d26bd

File tree

3 files changed

+119
-0
lines changed

3 files changed

+119
-0
lines changed

‎Art/ekachaijak-basketball/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Basketball</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="center">
11+
<div class="basketball"></div>
12+
<div class="horizontalSeam"></div>
13+
<div class="verticalSeam"></div>
14+
<div class="shadow"></div>
15+
</div>
16+
</body>
17+
</html>

‎Art/ekachaijak-basketball/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "basketball",
3+
"githubHandle": "ekachaijak"
4+
}

‎Art/ekachaijak-basketball/styles.css

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background: #FFE7AA;
5+
}
6+
.center {
7+
position: absolute;
8+
top: 50%;
9+
left: 50%;
10+
transform: translate(-505,-50%);
11+
}
12+
.horizontalSeam {
13+
position: absolute;
14+
width: 150px;
15+
height: 5px;
16+
background: #0B0602;
17+
border-radius: 30%;
18+
transform: translate(-50%,-50%);
19+
filter: blur(1px);
20+
animation: animate 1.5s linear infinite;
21+
}
22+
.verticalSeam {
23+
position: absolute;
24+
width: 5px;
25+
height: 150px;
26+
background: #0B0602;
27+
border-radius: 30%;
28+
transform: translate(-50%,-50%);
29+
filter: blur(1px);
30+
animation: animate 1.5s linear infinite;
31+
}
32+
.basketball {
33+
position: absolute;
34+
width: 150px;
35+
height: 150px;
36+
background: #E46F0E;
37+
border-radius: 50%;
38+
transform: translate(-50%,-50%);
39+
overflow: hidden;
40+
animation: animate 1.5s linear infinite;
41+
}
42+
.basketball:before {
43+
content: '';
44+
position: absolute;
45+
width: 100%;
46+
height: 100%;
47+
border-radius: 50%;
48+
box-sizing: border-box;
49+
background: transparent;
50+
border: 5px solid #0B0602;
51+
left: -65%;
52+
filter: blur(1px);
53+
}
54+
.basketball:after {
55+
content: '';
56+
position: absolute;
57+
width: 100%;
58+
height: 100%;
59+
border-radius: 50%;
60+
box-sizing: border-box;
61+
background: transparent;
62+
border: 5px solid #0B0602;
63+
right: -65%;
64+
filter: blur(1px);
65+
}
66+
@keyframes animate {
67+
0% {
68+
transform: translate(-50%,-50%) translateY(-200px) rotate(0deg);
69+
}
70+
50% {
71+
transform: translate(-50%,-50%) translateY(-0px) rotate(180deg);
72+
}
73+
100% {
74+
transform: translate(-50%,-50%) translateY(-200px) rotate(360deg);
75+
}
76+
}
77+
.shadow {
78+
position: absolute;
79+
width: 150px;
80+
height: 50px;
81+
transform: translate(-50%, 100%);
82+
background: rgba(0,0,0,.2);
83+
border-radius: 50%;
84+
z-index: -1;
85+
filter: blur(2px);
86+
animation: shadow 1.5s linear infinite;
87+
}
88+
@keyframes shadow {
89+
0% {
90+
transform: translate(-50%, 100%) scale(1);
91+
}
92+
50% {
93+
transform: translate(-50%, 100%) scale(.5);
94+
}
95+
100% {
96+
transform: translate(-50%, 100%) scale(1);
97+
}
98+
}

0 commit comments

Comments
 (0)