마우스 오버 5가지 스타일

웹에서 정말 많이 쓰이는 마우스 오버 효과.

다음은 애니메이션 태그인 transition 사용 시

시간차에 따라 달라지는 스타일 5가지이다.

 

 

1. HTML

<div id = "ex">
  <div class = "ease-in">ease-in</div>
  <div class = "linear">linear</div>
  <div class = "ease-in">ease-in</div>
  <div class = "ease-out">ease-out</div>
  <div class = "ease-in-out">ease-in-out</div>
</div>

 

 

2. CSS

#ex div	{
	float:left; width:100px; height:50px;
	margin:5px 10px; padding:5px; color:white;
	background-color:#006aff; border-radius:5px;
	text-align:center; font-wight:bold;
	}
#ex:hover div {
	height:400px;
	}
#ex .ease {
	-webkit-transition:3s ease;
	}
#ex .linear {
	-webkit-transition:3s linear;
	}
#ex .ease-in {
	-webkit-transition:3s ease-in;
	}
#ex .ease-out {
	-webkit-transition:3s ease-out;
	}
#ex .ease-in-out {
	-webkit-transition:3s ease-in-out;
	}

 

 

3. 출력

 

 

 

4. 파일 첨부

 

마우스오버.html

0.00MB