|
|
| 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;
| |
| }
| |