Skip to content

Commit f580456

Browse files
williamlee2503LaurelineP
williamlee2503
and
LaurelineP
authored
Basketball (#2978)
* adding my basketball art to the project * adding my basketball art to the project --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 3d3cde4 commit f580456

3 files changed

Lines changed: 152 additions & 0 deletions

File tree

‎Art/williamlee2503-basketball/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-Hant">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Basketball Animation</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<div class="stage">
11+
<div class="ring"></div>
12+
13+
<!-- 籃球容器：負責「位移」 -->
14+
<div class="basketball">
15+
<!-- 皮層：負責「旋轉」與外觀 -->
16+
<div class="skin">
17+
<!-- 用 SVG 畫出更真實的球紋（橫向弧＋三條縱向弧） -->
18+
<svg class="lacing" viewBox="0 0 100 100" aria-hidden="true">
19+
<!-- 橫向弧線（略帶弧度） -->
20+
<path d="M5,50 C 30,35 70,65 95,50" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>
21+
22+
<!-- 左側縱向弧（向左外拱） -->
23+
<path d="M25,5 C 10,30 10,70 25,95" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>
24+
25+
<!-- 中央縱向弧（弧度較小） -->
26+
<path d="M50,5 C 47,40 53,60 50,95" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>
27+
28+
<!-- 右側縱向弧（向右外拱） -->
29+
<path d="M75,5 C 90,30 90,70 75,95" stroke="#111" stroke-width="4" fill="none" stroke-linecap="round"/>
30+
</svg>
31+
</div>
32+
</div>
33+
</div>
34+
</body>
35+
</html>

‎Art/williamlee2503-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": "williamlee2503"
4+
}

‎Art/williamlee2503-basketball/styles.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/* 版面 */
2+
* { box-sizing: border-box; }
3+
html, body { height: 100%; }
4+
body {
5+
margin: 0;
6+
background: #0f0f10;
7+
display: grid;
8+
place-items: center;
9+
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
10+
}
11+
12+
.stage {
13+
position: relative;
14+
width: 520px;
15+
height: 520px;
16+
isolation: isolate;
17+
}
18+
19+
/* 藍色中空圓（更粗、縮放更明顯） */
20+
.ring {
21+
position: absolute;
22+
inset: 50% auto auto 50%;
23+
width: 300px;
24+
height: 300px;
25+
border: 18px solid #1e90ff;
26+
border-radius: 50%;
27+
transform: translate(-50%, -50%) scale(1);
28+
animation: ringPulse 3.2s ease-in-out infinite;
29+
filter: drop-shadow(0 0 10px rgba(30,144,255,.35));
30+
}
31+
32+
/* 籃球容器：負責路徑位移（會進出藍圈） */
33+
.basketball {
34+
position: absolute;
35+
left: 50%;
36+
top: 50%;
37+
width: 120px; /* 放大球體 */
38+
height: 120px;
39+
transform: translate(-50%, -50%);
40+
animation: moveBall 8s linear infinite;
41+
will-change: transform;
42+
}
43+
44+
/* 籃球皮層：外觀＋旋轉 */
45+
.skin {
46+
position: absolute;
47+
inset: 0;
48+
border-radius: 50%;
49+
/* 橘色皮革＋立體高光陰影 */
50+
background:
51+
radial-gradient(circle at 35% 30%, #ffbe6a 0%, #ff9a35 35%, #ff7f11 70%, #e06300 100%);
52+
box-shadow:
53+
inset 0 0 0 4px #0e0e0e, /* 外框黑線（真實感） */
54+
inset 20px -20px 40px rgba(0,0,0,.35), /* 暗部陰影 */
55+
inset -10px 10px 15px rgba(255,255,255,.15); /* 高光過渡 */
56+
overflow: visible;
57+
transform: rotate(0deg);
58+
transform-origin: 50% 50%;
59+
animation: spin 1.6s linear infinite; /* 籃球自轉 */
60+
}
61+
62+
/* 真實球紋（SVG） */
63+
.lacing {
64+
position: absolute;
65+
inset: 0;
66+
border-radius: 50%;
67+
pointer-events: none;
68+
}
69+
70+
/* 球在「完全進入藍圈中央」時的黃色描邊（與 moveBall 時序同步） */
71+
.basketball::after {
72+
content: "";
73+
position: absolute;
74+
inset: -7px;
75+
border-radius: 50%;
76+
border: 7px solid rgba(255,215,0,0.95); /* 金黃 */
77+
box-shadow: 0 0 18px rgba(255,215,0,0.7), 0 0 32px rgba(255,215,0,0.35);
78+
opacity: 0;
79+
animation: highlight 8s linear infinite;
80+
}
81+
82+
/* ---- 動畫定義 ---- */
83+
84+
/* 藍圈縮放：更大幅度 */
85+
@keyframes ringPulse {
86+
0%, 100% { transform: translate(-50%, -50%) scale(1.05); }
87+
50% { transform: translate(-50%, -50%) scale(1.7); }
88+
}
89+
90+
/* 籃球自轉（持續） */
91+
@keyframes spin {
92+
to { transform: rotate(360deg); }
93+
}
94+
95+
/* 籃球路徑（會進出藍圈；在 12.5%、37.5%、62.5%、87.5% 時回到中心） */
96+
@keyframes moveBall {
97+
/* 以舞台中心為原點，先到上方外圈，再依序右、下、左，期間多次「回中心」 */
98+
0% { transform: translate(-50%, -50%) translate(0, -190px); } /* 外：上 */
99+
12.5% { transform: translate(-50%, -50%) translate(0, 0); } /* 中：進圈 */
100+
25% { transform: translate(-50%, -50%) translate(190px, 0); } /* 外：右 */
101+
37.5% { transform: translate(-50%, -50%) translate(0, 0); } /* 中：進圈 */
102+
50% { transform: translate(-50%, -50%) translate(0, 190px); } /* 外：下 */
103+
62.5% { transform: translate(-50%, -50%) translate(0, 0); } /* 中：進圈 */
104+
75% { transform: translate(-50%, -50%) translate(-190px, 0); } /* 外：左 */
105+
87.5% { transform: translate(-50%, -50%) translate(0, 0); } /* 中：進圈 */
106+
100% { transform: translate(-50%, -50%) translate(0, -190px); } /* 回到外：上 */
107+
}
108+
109+
/* 與 moveBall 關鍵影格對齊：回中心時亮起黃色描邊 */
110+
@keyframes highlight {
111+
0%, 20%, 45%, 70%, 95%, 100% { opacity: 0; }
112+
12.5%, 37.5%, 62.5%, 87.5% { opacity: 1; }
113+
}

0 commit comments

Comments
 (0)