728x90
svg 애니메이션
오늘은 아래와 같은 텍스트 애니메이션을 만들어 보았습니다.
HTML
<svg viewBox="0 0 1320 300">
<text x="50%" y="50%" dy="40px" text-anchor="middle">
abcdefg
</text>
</svg>
CSS
@font-face {
font-family: 'CrownMychew';
font-weight: normal;
font-style: normal;
src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot');
src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.ttf') format("truetype");
font-display: swap;
}
body {
background-color: #e3f2fd;
}
svg {
font-family: 'CrownMychew';
font-size: 140px;
position: absolute;
width: 100%;
height: 100%;
text-transform: uppercase;
animation: stroke 5s infinite alternate;
fill: rgba(72,138,204,1);
}
@keyframes stroke {
0% {
stroke-dashoffset: 25%;
stroke-dasharray: 0 50%;
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
stroke-width: 2;
}
70% {
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
}
80% {
fill: rgba(72,138,204,0);
stroke: rgba(54,95,160,1);
}
100% {
stroke-dashoffset: -25%;
stroke-dasharray: 50% 0;
fill: rgba(72,138,204,1);
stroke: rgba(54,95,160,0);
stroke: 0;
}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]SVG intro (4) | 2022.09.07 |
|---|---|
| [CSS]CSS animation (4) | 2022.09.07 |
| [CSS]애니메이션03 (2) | 2022.09.02 |
| [CSS]애니메이션02 (5) | 2022.08.29 |
| [CSS]애니메이션01 (4) | 2022.08.29 |
댓글