본문 바로가기

광고

Design

Reference

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

CSS

NEWS

SITE

Coding


광고

Code View/Hover Effect

[Hover] Transitions and 3D Transforms을 이용한 마우스 오버 효과 CSS3의 transition과 transform을 이용한 플립 박스 효과입니다.앞면과 뒤면의 핵심 기술은 요거네요^^.panel .front {height: inherit;position: absolute;top: 0;z-index: 900;text-align: center;-webkit-transform: rotateX(0deg) rotateY(0deg); -moz-transform: rotateX(0deg) rotateY(0deg);-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;-webkit-t..
[Hover] 디자인이 멋있는 스케이트보드 hover 효과 만들기 스케이트보드 디자인도 멋있는데마우스 오버 효과까지 넣었네요^^멋있네요~ 스케이트보드 디자인도 다 코딩으로 만들었다는것도 너무 멋지네요^^ hover board 보드의 구조만 해도 저렇게 되네요^^ [미리보기] See the Pen Hover Board by Louis Coyle (@dropside) on CodePen.
[Hover] 정신없고 요란하게 움직이는 마우스 오버 효과입니다. 그냥 웃기네요^^ ㅋㅋㅋ정말 요란하게 움직이는 마우스 오버 효과입니다.^^이렇게 요란하게 움직임을 줄려면 노가다 필요합니다. @keyframes shake-base { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-0.5px, 1.5px) rotate(0.5deg); } 4% { transform: translate(1.5px, -2.5px) rotate(-1.5deg); } 6% { transform: translate(1.5px, -0.5px) rotate(-1.5deg); } 8% { transform: translate(1.5px, -2.5px) rotate(0.5deg); } 10% { transfor..
[Hover] box-shadow를 이용한 버튼 오버 효과 CSS3 만들기 다양한 box-shadow를 주어 만든아이콘 버튼 오버 효과 CSS3입니다. .diafragma:hover > .hoja { box-shadow: inset 0 14px 0 rgba(50, 250, 0, 0.8), inset 14px 0 0 rgba(50, 200, 0, 0.8), inset 0 -14px 0 rgba(50, 150, 0, 0.8), inset -14px 0 0 rgba(50, 100, 0, 0.8);}.hoja { border-radius: 100%; box-shadow: inset 0 140px 0 rgba(0, 200, 0, 0.4), inset 140px 0 0 rgba(50, 150, 0, 0.4), inset 0 -140px 0 rgba(0, 100, 0, 0.4), inset..
[Hover] 부드러운 효과와 깔끔한 디자인이 괜찮은 오버효과 | 깔끔한 디자인과 효과가 멋있는 CSS3입니다. .content .line { position: absolute; width: 0%; height: 2px; background: white; top: 84px; left: 0; display: block; transition: width 1s ease; z-index: 10;}.content:hover .line { width: 100%;} 효과는 이게 다예요^^ 간단하고 쓰기 편하네요^^ [미리보기] See the Pen Hover Animation by Tin (@ngot3382) on CodePen.
[Hover] 마우스 오버하면 펼쳐지는 메모지 CSS3 만들기 이 소스의 핵심은 #Awesome:hover h4{ opacity: 0; transition: opacity 50ms linear 300ms;} #Awesome:hover .front .circle{ margin-top: -90px; background-color: #e2d439; background-position: 0 100px;} 마우스 오버시 transition을 어떻게 주는가에 있겠죠^^생각보다 어렵지 않아서 소스보시면 도움이 될거예요~ See the Pen Pure CSS Peeling Sticky by patrickkunka (@patrickkunka) on CodePen.
[Hover] 마우스 방향에 따라 오버 효과를 주는 CSS & JS 마우스가 들어오는 방향에 따라오버효과를 주는 소스입니다. 우선 CSS를 통해 방향에 따라 효과를 미리 지정해야 합니다. .in-top .info { transform-origin: 50% 0%; animation: in-top $duration $timing-fn 0ms 1 forwards;}.in-right .info { transform-origin: 100% 0%; animation: in-right $duration $timing-fn 0ms 1 forwards;}.in-bottom .info { transform-origin: 50% 100%; animation: in-bottom $duration $timing-fn 0ms 1 forwards;}.in-left .info { transform-..
[Hover] 4각면에서 나오는 소설 버튼 오버(hover) 효과 만들기 마우스 오버를 하면 필요한 소셜버튼이 나오는 효과입니다.크게 어려운 부분은 없는 것 같네요^^ figure .contact .tw { top: 0; left: 0; background-color: rgba(0, 172, 238, .7); background-position: 30px 32px; transform: translate(-100%, -100%); } figure .contact .tw:hover { background-color: rgba(0, 172, 238, 1); } figure .contact .fb { top: 0; right: 0; background-color: rgba(59, 89, 152, .7); background-position: -42px 32px; transform: ..