CSS 애니메이션 그라데이션 테두리 생성기

회전하는 무지개 테두리는 CSS에서 실제로 만들려고 하기 전까지는 단순해 보입니다. 일반 사용자 정의 속성을 사용하여 conic-gradient() 내부의 각도에 애니메이션을 적용하는 것은 유용하지 않습니다. 왜냐하면 브라우저는 값이 각도인지 모르고 0도와 360도 사이를 보간할 수 없기 때문입니다. — 그냥 점프합니다. 이 생성기는 실제 수정 사항인 CSS 속성 및 값 API를 사용합니다. `@property --border-angle { 구문: '<angle>'; 초기값: 0deg; 상속: 거짓; }`는 사용자 정의 속성이 어떤 종류의 값을 보유하고 있는지 브라우저에 정확하게 알려주며, 이를 통해 @keyframes 규칙 전반에 걸쳐 원활하고 GPU 친화적인 보간이 가능해집니다.

링 자체는 배경이 `conic-gradient(from var(--border-angle), ...)`로 설정된 상자(테두리 너비를 뺀 값으로 삽입)보다 큰 크기의 ::전 의사 요소이므로 첫 번째 색상으로 다시 반복되므로 스윕에 눈에 보이는 이음새가 없습니다. 그런 다음 마스크는 실제 모양 조정 작업을 수행합니다. `mask: 선형-그라디언트(#000 0 0) 콘텐츠 상자, 선형-그라디언트(#000 0 0); 마스크 합성: 제외;`는 패딩 상자와 콘텐츠 상자 사이의 고리 모양 차이만 유지하고 다른 곳에서는 단색 그라데이션 사각형을 삭제합니다. Safari의 이전 `-webkit-mask-composite: xor`는 동일한 작업을 수행하고 표준 속성과 함께 제공되므로 효과는 하나의 엔진에서 자동으로 실패하지 않고 일관되게 렌더링됩니다.

테두리 반경 지원은 추가로 추가되는 것이 아닙니다. 의사 요소의 `border-radius: 상속`은 상자에 다이얼한 모든 반경이 자동으로 링에 전달됨을 의미합니다. 따라서 알약 모양의 버튼이나 둥근 카드는 곡선 모서리에서 흘러나오는 직선 가장자리 대신 둥근 빛나는 테두리를 얻습니다. 실시간 테스트: 날카로운 직사각형에서 전체 알약까지 반경 슬라이더를 드래그하고 모든 단계에서 링이 모양을 따르는 것을 확인하세요. 이는 이 기술의 실제 구현과 가짜 스크린샷을 구분하는 세부 사항입니다.

페이지의 다른 모든 항목은 생성된 코드에 직접 매핑됩니다. 너비 슬라이더는 링의 두께와 의사 요소의 삽입/패딩이고, 지속 시간 슬라이더는 @keyframes 애니메이션 지속 시간이고, 방향 스위치는 키프레임의 끝 각도 기호(+360deg 또는 -360deg)를 뒤집으며, 각 색상 정지점은 원추형 그라데이션() 호출 내에서 쉼표로 구분된 항목입니다. 이미지, JavaScript 기반 애니메이션 루프, 외부 서비스 없이 모든 것이 브라우저에서 실행됩니다. CSS 블록을 복사하면 붙여넣을 때마다 계속 회전합니다.