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
반응형
'CSS > SVG' 카테고리의 다른 글
[SVG]svg를 이용해 그래프 그리기 (1068) | 2019.05.31 |
---|---|
[SVG]svg 애니메이션 - rotate animtaion 적용하기 (603) | 2019.05.30 |
[SVG]텍스트 애니메이션 효과 관련 참고 사이트 (406) | 2019.05.27 |
[SVG]svg시작해보기 4 - path그리기 애니메이션 (415) | 2019.05.27 |
[SVG]svg 시작해보기3 - TEXT (376) | 2019.05.27 |
댓글