(문서를 비움) 태그: 비우기 |
편집 요약 없음 |
||
1번째 줄: | 1번째 줄: | ||
.test1 { | |||
color: #ccc; | |||
background: #111; | |||
font-family: sans-serif; | |||
} | |||
.test2, | |||
.test3 { | |||
margin: 0; | |||
} | |||
.test4 { | |||
color: #ccc; | |||
} | |||
.test5 { | |||
padding: 20px; | |||
} | |||
.test6 { | |||
font-size: 40px; | |||
line-height: 1; | |||
display: inline-block; | |||
color: #fff; | |||
z-index: 2; | |||
letter-spacing: 10px; | |||
filter: drop-shadow(0 1px 3px); | |||
} | |||
.test7 { | |||
height: 100px; | |||
background: #fff; | |||
} | |||
.test8 { | |||
position: relative; | |||
} | |||
.test8::before, | |||
.test8::after { | |||
content: attr(data-text); | |||
position: absolute; | |||
width: 110%; | |||
z-index: -1; | |||
} | |||
.test8::before { | |||
top: 10px; | |||
left: 15px; | |||
color: #e0287d; | |||
} | |||
.test8::after { | |||
top: 5px; | |||
left: -10px; | |||
color: #1bc7fb; | |||
} | |||
.test9 { | |||
clip-path: polygon( | |||
0% 12%, | |||
53% 12%, | |||
53% 26%, | |||
25% 26%, | |||
25% 86%, | |||
31% 86%, | |||
31% 0%, | |||
53% 0%, | |||
53% 84%, | |||
92% 84%, | |||
92% 82%, | |||
70% 82%, | |||
70% 29%, | |||
78% 29%, | |||
78% 65%, | |||
69% 65%, | |||
69% 66%, | |||
77% 66%, | |||
77% 45%, | |||
85% 45%, | |||
85% 26%, | |||
97% 26%, | |||
97% 28%, | |||
84% 28%, | |||
84% 34%, | |||
54% 34%, | |||
54% 89%, | |||
30% 89%, | |||
30% 58%, | |||
83% 58%, | |||
83% 5%, | |||
68% 5%, | |||
68% 36%, | |||
62% 36%, | |||
62% 1%, | |||
12% 1%, | |||
12% 34%, | |||
60% 34%, | |||
60% 57%, | |||
98% 57%, | |||
98% 83%, | |||
1% 83%, | |||
1% 53%, | |||
91% 53%, | |||
91% 84%, | |||
8% 84%, | |||
8% 83%, | |||
4% 83% | |||
); | |||
} | |||
.test10 { | |||
animation: paths 5s step-end infinite; | |||
} | |||
@keyframes paths { | |||
0% { | |||
clip-path: polygon( | |||
0% 43%, | |||
83% 43%, | |||
83% 22%, | |||
23% 22%, | |||
23% 24%, | |||
91% 24%, | |||
91% 26%, | |||
18% 26%, | |||
18% 83%, | |||
29% 83%, | |||
29% 17%, | |||
41% 17%, | |||
41% 39%, | |||
18% 39%, | |||
18% 82%, | |||
54% 82%, | |||
54% 88%, | |||
19% 88%, | |||
19% 4%, | |||
39% 4%, | |||
39% 14%, | |||
76% 14%, | |||
76% 52%, | |||
23% 52%, | |||
23% 35%, | |||
19% 35%, | |||
19% 8%, | |||
36% 8%, | |||
36% 31%, | |||
73% 31%, | |||
73% 16%, | |||
1% 16%, | |||
1% 56%, | |||
50% 56%, | |||
50% 8% | |||
); | |||
} | |||
/* Additional keyframes omitted for brevity */ | |||
} | |||
.test11 { | |||
position: relative; | |||
animation: movement 8s step-end infinite; | |||
} | |||
@keyframes movement { | |||
0% { | |||
top: 0px; | |||
left: -20px; | |||
} | |||
/* Additional keyframes omitted for brevity */ | |||
} | |||
.test12 { | |||
animation: opacity 5s step-end infinite; | |||
} | |||
@keyframes opacity { | |||
0% { | |||
opacity: 0.1; | |||
} | |||
/* Additional keyframes omitted for brevity */ | |||
} | |||
.test13 { | |||
animation: font 7s step-end infinite; | |||
} | |||
@keyframes font { | |||
0% { | |||
font-weight: 100; | |||
color: #e0287d; | |||
filter: blur(3px); | |||
} | |||
/* Additional keyframes omitted for brevity */ | |||
} | |||
.test14 span { | |||
animation: paths 5s step-end infinite; | |||
} | |||
.test14::before { | |||
animation: paths 5s step-end infinite, opacity 5s step-end infinite, | |||
font 8s step-end infinite, movement 10s step-end infinite; | |||
} | |||
.test14::after { | |||
animation: paths 5s step-end infinite, opacity 5s step-end infinite, | |||
font 7s step-end infinite, movement 8s step-end infinite; | |||
} | |||
.test15 { | |||
position: relative; | |||
padding: 200px 0; | |||
text-align: center; | |||
} | |||
.test16 { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
opacity: 0.5; | |||
filter: blur(5px); | |||
background: #fff; | |||
background-size: cover; | |||
} |
2024년 11월 2일 (토) 22:57 판
.test1 {
color: #ccc;
background: #111;
font-family: sans-serif;
}
.test2,
.test3 {
margin: 0;
}
.test4 {
color: #ccc;
}
.test5 {
padding: 20px;
}
.test6 {
font-size: 40px;
line-height: 1;
display: inline-block;
color: #fff;
z-index: 2;
letter-spacing: 10px;
filter: drop-shadow(0 1px 3px);
}
.test7 {
height: 100px;
background: #fff;
}
.test8 {
position: relative;
}
.test8::before,
.test8::after {
content: attr(data-text);
position: absolute;
width: 110%;
z-index: -1;
}
.test8::before {
top: 10px;
left: 15px;
color: #e0287d;
}
.test8::after {
top: 5px;
left: -10px;
color: #1bc7fb;
}
.test9 {
clip-path: polygon(
0% 12%,
53% 12%,
53% 26%,
25% 26%,
25% 86%,
31% 86%,
31% 0%,
53% 0%,
53% 84%,
92% 84%,
92% 82%,
70% 82%,
70% 29%,
78% 29%,
78% 65%,
69% 65%,
69% 66%,
77% 66%,
77% 45%,
85% 45%,
85% 26%,
97% 26%,
97% 28%,
84% 28%,
84% 34%,
54% 34%,
54% 89%,
30% 89%,
30% 58%,
83% 58%,
83% 5%,
68% 5%,
68% 36%,
62% 36%,
62% 1%,
12% 1%,
12% 34%,
60% 34%,
60% 57%,
98% 57%,
98% 83%,
1% 83%,
1% 53%,
91% 53%,
91% 84%,
8% 84%,
8% 83%,
4% 83%
);
}
.test10 {
animation: paths 5s step-end infinite;
}
@keyframes paths {
0% {
clip-path: polygon(
0% 43%,
83% 43%,
83% 22%,
23% 22%,
23% 24%,
91% 24%,
91% 26%,
18% 26%,
18% 83%,
29% 83%,
29% 17%,
41% 17%,
41% 39%,
18% 39%,
18% 82%,
54% 82%,
54% 88%,
19% 88%,
19% 4%,
39% 4%,
39% 14%,
76% 14%,
76% 52%,
23% 52%,
23% 35%,
19% 35%,
19% 8%,
36% 8%,
36% 31%,
73% 31%,
73% 16%,
1% 16%,
1% 56%,
50% 56%,
50% 8%
);
}
/* Additional keyframes omitted for brevity */
}
.test11 {
position: relative;
animation: movement 8s step-end infinite;
}
@keyframes movement {
0% {
top: 0px;
left: -20px;
}
/* Additional keyframes omitted for brevity */
}
.test12 {
animation: opacity 5s step-end infinite;
}
@keyframes opacity {
0% {
opacity: 0.1;
}
/* Additional keyframes omitted for brevity */
}
.test13 {
animation: font 7s step-end infinite;
}
@keyframes font {
0% {
font-weight: 100;
color: #e0287d;
filter: blur(3px);
}
/* Additional keyframes omitted for brevity */
}
.test14 span {
animation: paths 5s step-end infinite;
}
.test14::before {
animation: paths 5s step-end infinite, opacity 5s step-end infinite,
font 8s step-end infinite, movement 10s step-end infinite;
}
.test14::after {
animation: paths 5s step-end infinite, opacity 5s step-end infinite,
font 7s step-end infinite, movement 8s step-end infinite;
}
.test15 {
position: relative;
padding: 200px 0;
text-align: center;
}
.test16 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
filter: blur(5px);
background: #fff;
background-size: cover;
}