Skip to content

Commit 5c45a17

Browse files
dusunaxdusunax
committed
add: offset-path example
1 parent 136821c commit 5c45a17

File tree

1 file changed

+225
-0
lines changed

1 file changed

+225
-0
lines changed

‎css/offset-path-2.html‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>offset-path 예시</title>
7+
<style>
8+
:root {
9+
--star-color: #341f00;
10+
--heart-color: #390000;
11+
--tree-color: #001f00;
12+
--star-light-color: #ffa216;
13+
--heart-light-color: #e10000;
14+
--tree-light-color: #00c700;
15+
}
16+
body {
17+
background-color: #000;
18+
height: 100vh;
19+
margin: 0;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
}
24+
main {
25+
display: flex;
26+
flex-direction: column;
27+
margin: 0 auto;
28+
flex-wrap: wrap;
29+
}
30+
31+
/* 탭 스타일 */
32+
.tabs {
33+
padding: 8px 16px;
34+
background: rgb(43, 43, 43);
35+
color: white;
36+
border-radius: 5px;
37+
cursor: pointer;
38+
transition: background 0.3s ease;
39+
}
40+
input[type="radio"] {
41+
display: none;
42+
}
43+
input[type="radio"]:checked + .tabs {
44+
background: rgb(84, 71, 0);
45+
}
46+
/* 선택된 탭 보이기 */
47+
#tab-star:checked ~ .path-example#star,
48+
#tab-heart:checked ~ .path-example#heart,
49+
#tab-tree:checked ~ .path-example#tree {
50+
display: block;
51+
}
52+
53+
/* SVG 컨테이너 */
54+
.path-example {
55+
position: relative;
56+
width: 300px;
57+
height: 300px;
58+
margin: 40px auto;
59+
display: none;
60+
}
61+
.path-example .particle {
62+
position: relative;
63+
}
64+
svg {
65+
position: absolute;
66+
filter: blur(2px);
67+
width: 100%;
68+
height: 100%;
69+
}
70+
71+
/* 색상 및 path */
72+
#star {
73+
fill: var(--star-color);
74+
}
75+
#star .light {
76+
background-color: var(--star-light-color);
77+
offset-path: url(#star-path);
78+
}
79+
#heart {
80+
fill: var(--heart-color);
81+
}
82+
#heart .light {
83+
background-color: var(--heart-light-color);
84+
offset-path: url(#heart-path);
85+
}
86+
#tree {
87+
fill: var(--tree-color);
88+
}
89+
#tree .light {
90+
background-color: var(--tree-light-color);
91+
offset-path: url(#tree-path);
92+
animation-timing-function: ease-in;
93+
}
94+
95+
/* 파티클 */
96+
.particle .light {
97+
position: absolute;
98+
width: 6px;
99+
height: 6px;
100+
border-radius: 4px;
101+
transform: translate(-50%, -50%);
102+
offset-anchor: top;
103+
animation: move 5s linear infinite;
104+
opacity: 0;
105+
z-index: 10;
106+
}
107+
.particle div{
108+
position: relative;
109+
height: 400px;
110+
width: 0px;
111+
margin: 0 auto;
112+
}
113+
.particle .light::before {
114+
width: 8px;
115+
height: 8px;
116+
border-radius: 100%;
117+
content: '';
118+
position: absolute;
119+
left: 50%;
120+
top: 50%;
121+
transform: translate(-50%, -50%);
122+
box-shadow: 0 0 20px rgb(186, 186, 186);
123+
animation: pulse 0.5s linear infinite alternate;
124+
}
125+
.particle .light:nth-child(3n+2) {
126+
animation-delay: 0.1s;
127+
}
128+
.particle .light:nth-child(3n+3) {
129+
animation-delay: 0.2s;
130+
}
131+
.particle .light:nth-child(3n+4) {
132+
animation-delay: 0.3s;
133+
}
134+
.particle .light:nth-child(3n+5) {
135+
animation-delay: 0.4s;
136+
}
137+
.particle .light:nth-child(3n+6) {
138+
animation-delay: 0.5s;
139+
}
140+
141+
/* 애니메이션 */
142+
@keyframes move {
143+
0% {
144+
offset-distance: 0%;
145+
opacity: 1;
146+
}
147+
100% {
148+
offset-distance: 100%;
149+
opacity: 1;
150+
}
151+
}
152+
@keyframes pulse {
153+
0% {
154+
opacity: 0;
155+
}
156+
100% {
157+
opacity: 1;
158+
}
159+
}
160+
</style>
161+
</head>
162+
<body>
163+
<main>
164+
<input type="radio" id="tab-star" name="tab" checked>
165+
<label class="tabs" for="tab-star">⭐ Star</label>
166+
167+
<input type="radio" id="tab-heart" name="tab">
168+
<label class="tabs" for="tab-heart">❤️ Heart</label>
169+
170+
<input type="radio" id="tab-tree" name="tab">
171+
<label class="tabs" for="tab-tree">🌲 Tree</label>
172+
173+
<section class="path-example" id="star">
174+
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" class="star">
175+
<polygon
176+
points="150,16.7 183.3,100 266.7,100 200,150 216.7,233.3 150,183.3 83.3,233.3 100,150 33.3,100 116.7,100"
177+
id="star-path"
178+
/>
179+
</svg>
180+
<div class="particle">
181+
<div class="light"></div>
182+
<div class="light"></div>
183+
<div class="light"></div>
184+
<div class="light"></div>
185+
<div class="light"></div>
186+
<div class="light"></div>
187+
</div>
188+
</section>
189+
190+
<section class="path-example" id="heart">
191+
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" class="heart">
192+
<path
193+
d="M150,170 C105,125 75,90 75,60 C75,35 100,20 125,20 C140,20 145,28 150,45 C155,28 160,20 175,20 C200,20 225,35 225,60 C225,90 195,125 150,170 Z"
194+
id="heart-path"
195+
/>
196+
</svg>
197+
<div class="particle heart">
198+
<div class="light"></div>
199+
<div class="light"></div>
200+
<div class="light"></div>
201+
<div class="light"></div>
202+
<div class="light"></div>
203+
<div class="light"></div>
204+
</div>
205+
</section>
206+
207+
<section class="path-example" id="tree">
208+
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" class="tree">
209+
<polygon
210+
points="150,10 190,70 175,70 200,100 185,100 215,150 85,150 115,100 100,100 125,70 110,70"
211+
id="tree-path"
212+
/>
213+
</svg>
214+
<div class="particle tree">
215+
<div class="light"></div>
216+
<div class="light"></div>
217+
<div class="light"></div>
218+
<div class="light"></div>
219+
<div class="light"></div>
220+
<div class="light"></div>
221+
</div>
222+
</section>
223+
</main>
224+
</body>
225+
</html>

0 commit comments

Comments
 (0)