CSS/SVG
[SVG] 체크박스에 SVG 로 애니메이션 효과 넣기
알찬 퍼블리셔
2019. 5. 30. 15:23
728x90
반응형
라벨안에 svg 를 넣어줍니다.
<label for="check">
<svg width="30" height="15" xmlns="http://w3.org/2000/svg" version="1.1" viewbox="0 0 80 40">
<polyline class="st1" points="9.06 20.89 25.85 35.74 50.46 9.35"/>
</svg>
<span>체크하려면 클릭하세요.</span>
</label>
css를 이용해 check 되면 label 의 svg를 그리는 애니메이션을 추가합니다.
input:checked ~ label .st1{
stroke:#000000;
animation: dash 0.3s linear alternate 1;
}
728x90
반응형