밝은 빛줄기가 표면을 대각선으로 한 번 훑고 지나가는 광택 효과. 버튼·카드에 은은한 생동감을 줄 때 씁니다.
디자인 아틀라스<div class="btn">Upgrade to Pro</div>.btn{position:relative;overflow:hidden;padding:16px 34px;border-radius:12px;
background:linear-gradient(135deg,#2b2b3a,#15151f);color:#fff;font-weight:700;letter-spacing:.02em}
.btn::after{content:"";position:absolute;top:-50%;left:-60%;width:35%;height:220%;
background:linear-gradient(75deg,transparent,rgba(255,255,255,.55),transparent);
animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}30%,100%{left:140%}}요소 위에 좁고 기울어진 흰색 그라데이션 띠를 만들고, 왼쪽 바깥에서 오른쪽 바깥까지 이동시킵니다. overflow: hidden 인 부모 안에서만 보이게 잘라냅니다.
스켈레톤 로딩의 shimmer 와 비슷해 보이지만 용도가 다릅니다 — shimmer 는 "로딩 중"을 뜻하는 반복 애니메이션이고, shine-sweep 은 완성된 표면에 광택을 더하는 장식으로 호버나 몇 초에 한 번만 지나갑니다.
프리미엄/추천 배지, CTA 버튼에 드물게 씁니다. 계속 반복하면 산만해지니 호버 시 1회 또는 긴 간격(5초 이상)으로 두세요.