CSS3だけで出来る。8つのロールオーバーアニメーション

  • 2015年1月5日
CSS3だけで出来る。8つのロールオーバーアニメーション

CSS3をサポートしたブラウザも年々増えてきました。そんな中でボバーエフェクトやトランジションを使用したオプションは多くあります。より多くの人が目を惹かれるようなをホバーエフェクトを使用して作って行きます。

はじめに

最初は簡単なHTMLからスタートしていきます。
以下のようなHTMLをベースに用意し、それに変化を加えていきます。

HTML

<button>Hover Me</button>

CSS

button {
	border: none;
	background: #3a7999;
	color: #f2f2f2;
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease; 
}

Sample

1.水平方向にホバーする

button:before {
	content:'';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 42px;
	background: rgba(255,255,255,0.3);
	border-radius: 5px;
	transition: all 2s ease;
}

button:hover:before {
	width: 100%;
}

2.垂直方向にホバーする

button :before  {
	 content : '' ; 
	position : absolute ; 
	top : 0 px ;  
	left : 0 px ;  
	width : 100 % ;  
	height : 0 px ;  
	background : rgba( 255 , 255 , 255 , 0.3 ) ;  
	border-radius : 5 px ;  
	transition : all 2 s和らげる。
}

button:hover:before {
	height: 42px;
}

3.ゴーストボタン

button:hover {
	background: rgba(0,0,0,0);
	color: #3a7999;
	box-shadow: inset 0 0 0 3px #3a7999;
}

4.横からアイコンがアニメーションで登場する

button{ 
	padding: 10px 35px;  
	overflow:hidden;
}

button:before {
	font-family: 'fontello';
	content:"\e800";
	position: absolute;
	top: 11px;
	left: -30px;
	transition: all 200ms ease;
}

button:hover:before {
	left: 7px;
}

5.バウス効果

@keyframes bounce {
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

button:hover {
	animation: bounce 1s;
}

6.スキュー

button.b6:hover {
transform: skew(-10deg);
}

7.枠を点線にする

button {
	border: 3px solid #3a7999;
}
button:hover {
	border: 3px dotted #3a7999;
	color: #3a7999;
	background: rgba(0,0,0,0);
}

8.フリップ3Dアニメーション

button {
	transform-style: preserve-3d;
}

button:after {
	top: -100%;
	left: 0px;
	width: 100%;
	position: absolute;
	background: #3a9999;
	border-radius: 5px;
	content: 'Flipped';
	transform-origin: left bottom;
	transform: rotateX(90deg);
}

button:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}