본문 바로가기

광고

Design

Tutorial

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

Reference

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..
[Hover] 디자인이 멋있는 스케이트보드 hover 효과 만들기 스케이트보드 디자인도 멋있는데마우스 오버 효과까지 넣었네요^^멋있네요~ 스케이트보드 디자인도 다 코딩으로 만들었다는것도 너무 멋지네요^^<div class='back'>  <div class='background'></div>  <div class='midground'></div>  <div class='foreground'></div><..
[Hover] 정신없고 요란하게 움직이는 마우스 오버 효과입니다. 그냥 웃기네요^^ ㅋㅋㅋ정말 요란하게 움직이는 마우스 오버 효과입니다.^^이렇게 요란하게 움직임을 줄려면 노가다 필요합니다.@keyframes shake-base {  0% {    transform: translate(0px, 0px) rotate(0deg);  }  2% {    transform: translate(-0.5px, 1.5px) rotate(0.5deg); ..
[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 {..
[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 ..
[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을 어떻게 주는가에 있겠죠^^생각보다 어렵지 않아서 소스보시면 도움이 될거예요..
[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%;  a..
[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%);..