Skip to content

Commit 65ffaa2

Browse files
dusunaxdusunax
committed
docs: add offset-path example html
1 parent d11df72 commit 65ffaa2

File tree

1 file changed

+166
-0
lines changed

1 file changed

+166
-0
lines changed

‎css/offset-path.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS offset-path, ray() 함수 예시</title>
6+
<style>
7+
/* 전체 스타일 */
8+
body {
9+
padding: 20px;
10+
max-width: 800px;
11+
margin: 0 auto;
12+
}
13+
14+
.container {
15+
position: relative;
16+
border: 1px solid #ccc;
17+
height: 200px;
18+
margin-bottom: 40px;
19+
}
20+
21+
.p-50 {
22+
padding: 50px;
23+
box-sizing: border-box;
24+
}
25+
26+
.solid {
27+
width: 100%;
28+
height: 100%;
29+
background-color: rgb(223, 255, 255);
30+
}
31+
32+
.box {
33+
width: 50px;
34+
height: 50px;
35+
border-radius: 8px;
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
display: flex;
40+
align-items: center;
41+
justify-content: center;
42+
font-weight: bold;
43+
background-color: yellow;
44+
border-top: 4px solid black;
45+
opacity: 20%;
46+
animation: move 1s linear infinite;
47+
}
48+
49+
@keyframes move {
50+
to {
51+
offset-distance: 100%;
52+
opacity: 100%;
53+
}
54+
}
55+
56+
.code-block {
57+
background-color: #f5f5f5;
58+
padding: 10px;
59+
border-radius: 4px;
60+
margin-bottom: 10px;
61+
font-family: monospace;
62+
white-space: pre;
63+
}
64+
65+
.outer0 {
66+
position: relative;
67+
}
68+
69+
svg {
70+
fill: none;
71+
stroke: black;
72+
stroke-width: 1;
73+
stroke-dasharray: 6;
74+
}
75+
76+
/* 예시별 스타일 */
77+
.box0 {
78+
animation-duration: 5s;
79+
}
80+
81+
.box1 {
82+
animation-duration: 3s;
83+
}
84+
85+
.box0-a {
86+
offset-path: padding-box;
87+
}
88+
.box0-b {
89+
offset-path: content-box;
90+
}
91+
.box0-c {
92+
offset-path: polygon(5% 10%, 95% 10%, 95% 90%, 5% 90%);
93+
}
94+
95+
.box1-a {
96+
offset-path: url(#path-a);
97+
}
98+
99+
.box1-b {
100+
offset-path: url(#path-b);
101+
}
102+
103+
.box2 {
104+
offset-path: ray(0deg);
105+
animation-direction: alternate;
106+
}
107+
108+
.box3 {
109+
offset-rotate: 0deg;
110+
offset-path: ray(105deg farthest-corner at 0px 0px);
111+
animation-direction: alternate;
112+
animation-duration: 2.5s;
113+
}
114+
</style>
115+
</head>
116+
<body>
117+
<h1>CSS: offset-path, ray() 함수 예시</h1>
118+
119+
<p>모든 예시에서 <code>offset-distance</code> 속성을 0%에서 100%로 애니메이션화하여 요소가 경로를 따라 움직이도록 합니다. 투명도는 20%에서 100%로 변화합니다.</p>
120+
121+
<h2>예시 0: 기본 동작</h2>
122+
<p>1) offset-path 속성을 명시하지 않으면 기본값은 none이며, offset-distance는 position의 left, top, right, bottom과 같은 속성을 사용합니다. coord-box를 사용하여 박스의 어떤 부분을 기준으로 경로를 그릴지 선택할 수 있습니다.</p>
123+
<p>2) basic-shape 기본 모양 함수를 사용하여 경로를 그릴 수 있습니다.</p>
124+
<pre class="code-block">
125+
0-a. offset-path: padding-box;
126+
0-b. offset-path: content-box;
127+
0-c. offset-path: polygon(5% 10%, 95% 10%, 95% 90%, 5% 90%);</pre>
128+
<div class="container p-50">
129+
<div class="box box0 box0-a">0-a</div>
130+
<div class="box box0 box0-b">0-b</div>
131+
<div class="box box0 box0-c">0-c</div>
132+
<div class="solid"></div>
133+
</div>
134+
135+
<h2>예시 1: url(#svg-path)</h2>
136+
<p>사각형과 별 모양의 svg의 경로를 따라 이동하는 예시입니다.</p>
137+
<pre class="code-block">offset-path: url(#path-a);</pre>
138+
<div class="container p-50">
139+
<div class="outer0">
140+
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
141+
<rect x="0" y="0" width="300" height="100" id="path-a"/>
142+
<polygon points="150,10 170,60 220,60 180,90 190,140 150,110 110,140 120,90 80,60 130,60"
143+
fill="gold" id="path-b" />
144+
</svg>
145+
<div class="box box1 box1-a">1-a</div>
146+
<div class="box box1 box1-b">1-b</div>
147+
</div>
148+
</div>
149+
150+
<h2>예시 2: ray() 함수</h2>
151+
<p>ray의 기본 위치는 50%, 50%입니다. angle은 시작 위치부터 시작되는 path가 어떤 각도로 이동할지 결정합니다. 0도는 y축이 올라가는 기준이며, 시계 방향으로 각도가 증가합니다.(conic-gradient와 동일) 또한 요소가 해당 축을 top으로 맞닿도록 회전이 되어있는 모습을 볼 수 있습니다.</p>
152+
<pre class="code-block">offset-path: ray(0deg);</pre>
153+
<div class="container">
154+
<div class="box box2">2</div>
155+
</div>
156+
157+
<h2>예시 3: 대각선 이동</h2>
158+
<p>offset-rotate을 0deg로 설정해 요소가 회전하지 않도록 했습니다. at 0px 0px은 시작 위치를 결정합니다. farthest-corner는 시작 위치에서 가장 멀리 있는 코너를 타겟으로 합니다.</p>
159+
<pre class="code-block">
160+
offset-rotate: 0deg;
161+
offset-path: ray(105deg farthest-corner at 0px 0px);</pre>
162+
<div class="container">
163+
<div class="box box3">3</div>
164+
</div>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)