HTML / CSS
[CSS] ::after 가상요소를 통해 원 그리기 애니메이션 구현
- 2025.08.13 14:32:39
  swiper 구현 도중 dot에 원이 그려지면 다음 슬라이드로 넘어가는 효과가 필요했다. 위 화면과 같이 1px border 의 원이 그려지는 애니메이션을 ::after 가상요소를 통해 구현했다. [!]css[/!] 코드는 아래와 같다. @property --angle {
syntax: '<angle>'; inherits: false; initial-value: 0deg; } .dots span.swiper-pagination-bullet-active::after{ content:""; position:absolute; inset:0; transition: all 0.1s; border-radius:50%; --thickness:1px; --angle:0deg; background: conic-gradient(rgba(255,255,255,0.8) var(--angle), transparent 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0); animation: draw 4s linear forwards; } @keyframes draw{ from{ --angle: 0deg; } to { --angle: 360deg; } } conic-gradient() 는 원형에 색상을 채워주는 그라이언트. 그라디언트 위에 mask로 구멍을 뚫어줘서 호 처럼 보이게 하고 그라디언트를 4초 동안 천천히 채워가는 방식이다. |