라인을 원의 중심축 기준으로 시계모양으로 돌리는 css 구문입니다.
animation 속성에 일정시간 반복되는 linear, infinite(무한)을 추가하고
keyframe값으로 초기값 0% ~ 100% 각도를 360deg로 설정해주면 완성 :) !
.sec1 .circle .line {
position: absolute;
top: 51%;
left: 75%;
width: 27.775vh;
height: 1px;
background: #fff;
animation:rot 3s linear infinite;
transform-origin:bottom left;
}
@keyframes rot{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
'프론트엔드 공부 > html css' 카테고리의 다른 글
svg dash-array와 stroke 활용하여 움직이는 글자 만들기 (0) | 2021.05.05 |
---|---|
svg 를 활용한 글자곡선 만들기 (0) | 2021.05.05 |
overflow:hidden 이외에 iframe scroll 없애는 방법 ! (0) | 2021.05.04 |
css grid 반응형 예제 (0) | 2021.04.29 |
css calc() 사용하기 ! (0) | 2021.04.17 |