[SVG] SVG 다루기
1. SVG란? SVG는, 확장 가능한 벡터 그래픽(Scalable Vector Graphics)을 말합니다. 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어인데요, 텍스트 편집기에서 CSS나 JS로 수정이 가능하
nykim.work
CSS3 - 74 [ SVG Loading Animation] SVG 아이콘 디자인, SVG html 구현, SVG CSS 애니메이션
https://www.youtube.com/watch?v=C9tY_o8hR1Q&t=1380s
html
<?xml version="1.0"?>
<link rel="stylesheet" href="svg.css">
<svg id="page-loader">
<circle cx="75" cy="75" r="20" />
<circle cx="75" cy="75" r="35" />
<circle cx="75" cy="75" r="50" />
<circle cx="75" cy="75" r="65" />
</svg>css
#page-loader {width: 150px;height: 150px;border: 1px solid red;}
#page-loader circle {fill: none;stroke-width: 10px;stroke-linecap:round;animation:loader 4s infinite ease-in-out;transform-origin: 50% 50%;}
@keyframes loader{50% {transform: rotate(360deg);}}
#page-loader circle:nth-child(1){stroke:#ffc114; stroke-dasharray:50;animation-delay:0.2s;}
#page-loader circle:nth-child(2){stroke:#ff5248; stroke-dasharray:100;animation-delay:0.4s;}
#page-loader circle:nth-child(3){stroke:#19cdca; stroke-dasharray:180;animation-delay:0.6s;}
#page-loader circle:nth-child(4){stroke:#4e80e1; stroke-dasharray:350;stroke-dashoffset: -100;animation-delay:0.8s;}'컴퓨터 > 이미지' 카테고리의 다른 글
| svg 파일 만들기 Inkscape (0) | 2021.12.29 |
|---|---|
| svg 순차적으로 나오기 (0) | 2021.12.29 |
| Photoshop tip (0) | 2021.10.06 |
| just color picker 색 코드 따기 (0) | 2019.09.01 |
| 오른마우스 금지 이미지 가져오기 (0) | 2019.06.06 |