| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
Tags
- 해피CGI
- #솔루션
- 홈페이지
- #쇼핑몰
- #홈페이지제작
- 사이트제작
- 게시판
- 웹솔루션
- #동영상
- #CSS
- #happycgi
- #이미지
- CSS
- #업종별
- jquery
- happycgi
- php
- 이미지
- 솔루션
- #웹솔루션
- 해피씨지아이
- #cgimall
- #해피CGI
- CGIMALL
- 홈페이지제작
- #jQuery
- #홈페이지
- #image
- #뉴스
- javascript
- Today
- Total
목록2026/05/19 (1)
웹솔루션개발 26년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] Elastic hover effect (Chrome only) 탄력적인 마우스 오버 효과
마우스 호버를 하면 탄력적이게 휘어집니다.마우스 아웃하면 탄력적으로 원래 모양으로 돌아갑니다.이 소스는 메뉴 텍스트 각 글자가 hover 시 탄성 있게 위로 휘어지는 효과를 만든 CSS입니다.핵심은 일반적인 transform 애니메이션이 아니라 아래 내용을 확인하세요. @property 로 커스텀 속성 애니메이션 가능하게 만듬offset + shape() 로 글자마다 곡선 경로 위에 배치sibling-index(), sibling-count() 로 글자 위치별로 다르게 계산hover 시 --_s 값을 0 → 1로 바꿔서 곡률을 키움전체 소스는 해당 사이트 또는 첨부 파일을 다운로드 받아서 확인이 가능합니다.
카테고리 없음
2026. 5. 19. 09:23