본문 바로가기
CSS

원 회전 애니메이션

by 코딩달림 2022. 8. 29.
728x90

원 회전 애니메이션

CSS를 사용해 두개의 원을 회전시키는 간단한 애니메이션 효과 입니다.

이번 애니메이션은 길다란 막대 블록을 만든 후 position: absolute로 양 끝에 원을 배치시켜 회전시키면 되는 간단한 애니메이션 효과 입니다.

색상을 넣을 때 그라디언트 효과를 넣을 수 있습니다. 그라디언트 효과는 gradient 요소로 사용하며 시작 위치, 색상, 끝나는 위치, 색상 형태로 적용이 가능합니다.

linear-gradient : 선형 그라디언트
radical-gradient : 반지름형 그라디언트
repeating-gradient : 반복형 그라디언트

'CSS' 카테고리의 다른 글

SGV Intro  (5) 2022.09.07
박스 회전 애니메이션  (4) 2022.08.29
요소 숨김 기능  (7) 2022.08.26
색상 표현법  (5) 2022.08.24
CSS 단위  (4) 2022.08.24

댓글


광고 준비중입니다.