리프트 (엘리베이션)
순수 CSS. 요소를 위로 올리고 그림자를 키우면 ‘떠오르는’ 느낌. 카드·버튼에 가장 흔히 쓴다.
AI에게 이렇게“호버하면 카드가 위로 떠오르며 그림자가 커지게 해줘.”
핵심 코드3D 틸트
커서 위치를 rotateX/rotateY로 변환. 자동 데모는 계속 기울고, 마우스를 올리면 커서를 따라 기운다. perspective가 3D의 핵심.
AI에게 이렇게“카드가 마우스 위치에 따라 3D로 기울어지게 해줘(perspective + rotateX/Y).”
핵심 코드글로우 (블룸)
순수 CSS. 색이 번지는 box-shadow + 살짝 밝기(brightness). CTA 버튼 강조에 좋다.
AI에게 이렇게“호버하면 버튼 주변으로 색이 은은하게 빛나게(글로우) 해줘.”
핵심 코드샤인 스윕
순수 CSS. 기울인 흰 그라디언트 바(::after)를 요소 위로 지나가게 한다. overflow:hidden 필수.
AI에게 이렇게“호버하면 버튼 위로 빛이 한 번 스윽 지나가는 샤인 효과 넣어줘.”
핵심 코드언더라인 리빌
순수 CSS. 밑줄을 background 그라디언트로 만들고 background-size의 너비를 0→100%로 늘린다. 링크·메뉴에 필수.
AI에게 이렇게“링크에 호버하면 밑줄이 왼쪽에서 오른쪽으로 그어지게 해줘.”
핵심 코드이미지 줌 (Ken Burns)
순수 CSS. 이미지 컨테이너에 overflow:hidden, 안의 이미지를 scale로 확대. 프레임은 고정, 이미지만 커진다.
AI에게 이렇게“썸네일에 호버하면 안의 이미지만 천천히 확대되게 해줘(프레임은 고정).”
핵심 코드스포트라이트 (커서 글로우)
마우스 좌표를 CSS 변수(--mx, --my)로 넘기고, 그 지점을 중심으로 radial-gradient 빛을 그린다. SaaS 카드에서 자주 본다.
AI에게 이렇게“카드 위에서 마우스를 따라 빛이 움직이는 스포트라이트 효과 만들어줘.”
핵심 코드마그네틱 (자석 끌림)
버튼이 커서 쪽으로 살짝 끌려간다. 커서와의 거리(dx,dy)에 배율을 곱해 translate. 자동 데모는 보이지 않는 점을 따라 움직인다.
AI에게 이렇게“버튼이 근처 마우스 쪽으로 자석처럼 살짝 끌려오게 해줘.”
핵심 코드컬러 필 (스와이프)
순수 CSS. 배경 블록(::before)을 scaleX(0→1)로 채우고 글자색을 뒤집는다. 아웃라인 버튼에 자주 쓴다.
AI에게 이렇게“아웃라인 버튼에 호버하면 색이 왼쪽에서 차오르고 글자색이 반전되게 해줘.”
핵심 코드