회전 그라디언트 테두리
CSSPaint


Pro 플랜
월 9,900원 · 언제든 해지
@property로 각도 변수를 등록하면 각도를 부드럽게 바꿀 수 있습니다. 이 각도를 원뿔형 그라디언트(conic-gradient)의 시작 방향으로 씁니다. 배경을 두 겹으로 깔아서, 안쪽은 흰색으로 덮고 테두리 부분에만 그라디언트가 보이게 했습니다. 매 프레임 배경을 다시 그리므로, 한 화면에 여러 개를 쓰는 것은 피하는 편이 좋습니다.
값 조정
바꾼 값은 아래 코드에 바로 반영됩니다.
- 애니메이션 속성
- --glow-angle → background
- 렌더링 비용
- Paint
demo-로 시작하는 클래스는 미리보기 모양을 위한 것이라 복사할 코드의 CSS에는 넣지 않았습니다.