본문 바로가기

광고

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; ..
[Hover] 디자인이 멋있는 스케이트보드 hover 효과 만들기 스케이트보드 디자인도 멋있는데마우스 오버 효과까지 넣었네요^^멋있네요~ 스케이트보드 디자인도 다 코딩으로 만들었다는것도 너무 멋지네요^^
[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% { transform..
[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-o..
[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: t..