웹솔루션개발 26년 노하우! 해피CGI의 모든것

마우스 호버 시 해당 영역이 강조되는 디자인 입니다.캐릭터 리스트, 팀 구성원 목록 또는 참가자 목록에 유용합니다.자세한 내용은 데모를 참고해주시기 바랍니다.HTML CSS*,*::after,*::before { margin: 0; padding: 0; box-sizing: border-box;} :root { --item-size: clamp(4rem, 1.2941rem + 9.4118vw, 6rem); --overlap-offset: calc(var(--item-size) / 2); --shadow-color: 0deg 0% 0%; --bg-color: oklch(80% 0.15 calc..

마우스 호버를 하면 탄력적이게 휘어집니다.마우스 아웃하면 탄력적으로 원래 모양으로 돌아갑니다.이 소스는 메뉴 텍스트 각 글자가 hover 시 탄성 있게 위로 휘어지는 효과를 만든 CSS입니다.핵심은 일반적인 transform 애니메이션이 아니라 아래 내용을 확인하세요. @property 로 커스텀 속성 애니메이션 가능하게 만듬offset + shape() 로 글자마다 곡선 경로 위에 배치sibling-index(), sibling-count() 로 글자 위치별로 다르게 계산hover 시 --_s 값을 0 → 1로 바꿔서 곡률을 키움전체 소스는 해당 사이트 또는 첨부 파일을 다운로드 받아서 확인이 가능합니다.

마우스를 올리면 화살표가 생기는 버튼 호버 효과입니다. 다양한 사이트에서 응용 가능합니다. HTML 구조 Hover Hover CSS(SCSS) 소스* { box-sizing: border-box; margin: 0; padding: 0;} body { width: 100%; height: 100vh; display: flex; overflow: hidden;} .btn-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: var(--bg); &:nth-child(1) { --btn-bg: #d..

카드 유형 마우스 오버 이펙트입니다.마우스의 움직임에 따라 빛이 밝혀지는 효과입니다.소스를 변경하여 다양하게 응용 가능합니다.HTML 구조 Apartments Lorem ipsum dolor Unicorns Lorem ipsum dolor... CSS 소스:root { --bg-color: rgb(20, 20, 20); --card-color: ..

Interactive Elastic Hover Menu Animation인터랙티브 탄성(Elastic) 호버 메뉴 애니메이션JavaScript와 CSS3 애니메이션을 활용하여 메뉴 버튼에 탄성(Eelastic) 형태의 변형 및 확장 효과를 구현한 인터랙션 UI입니다.호버 시 버튼이 자연스럽게 팽창하면서 메뉴 항목이 드러나는 구조로, 유체적인 움직임을 기반으로 한 현대적인 사용자 경험을 제공합니다.웹 포트폴리오, 서비스 네비게이션, 아이콘 기반 메뉴, 크리에이티브 인터페이스 등 다양한 영역에 적용하기 적합합니다.HTML 구조 Now in Showroom https://images.unsplash.com/photo-1617788138017-80ad40651399?ixlib=rb-4.0.3&auto=form..

마우스를 올리면 디자인이 변경되는 깔끔하고 심플한 느낌의 버튼 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Hover Swipe CSS 소스* { margin: 0; padding: 0; border-sizing: border-box;} html, body { width: 100%; height: 100%; border: none; outline: none;} body { display: flex; align-items: center; justify-content: center; background-color: #d2f7d3;} #cursor { position: fixed; z-index: 100; left: 0; top: 0; ..

마우스를 올리면 제목, 평점 등 다양한 정보가 나타나는 마우스 오버 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 ...자세한 소스는 데모 사이트를 통해 확인해 주세요. CSS 소스body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f5;} .wrapper { position: relative; width: 100%; height: 100%; padding: 20px; display: flex; align-content: center; justify-content: center; gap: 2..

마우스를 오버하면 해당 이미지 캐릭터가 입체느낌으로 나오는 디자인입니다.소개용으로 사용하면 좋을거 같습니다.HTML과 CSS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML             https://ggayane.github.io/css-experiments/cards/dark_rider-cover.jpg" />        https://ggayane.github.io/css-experiments/cards/dark_rider-title.png" />    https://ggayane.github.io/css-experiments/cards/dark_rider-character.webp" />                https://ggayane.github.io/cs..

마우스를 따라 카드 배경이 따라오는 디자인 입니다.설명 카드에 강조 효과를 주어 보고있는 위치를 명확하게 확인할 수 있도록 도와줍니다. 자세한 내용은 데모사이트 주소에서 확인이 가능합니다.

카드에 마우스 오버시 sns 링크와 정보 영역이 젤리효과 에니메이션과 함께 출력됩니다.svg 를 이용하여 곡선을 만듭니다.css 로 에니메이션 효과를 구현합니다.cubic-bezier 을 이용하여 곡선을 제어합니다.