こんにちは！
デザイナーのひろきちです！
この間は「【jQuery】簡単に震える、回る、画像を作ってみる。」と、動きのあるjQueryの実装方法を紹介しましたが、今回はCSSだけで出来るマウスオーバーアクションを紹介したいと思います。
今回もDEMOに可愛いうさぎちゃんを使っちゃいますね。
それではどうぞ。
マウスオーバーで画像拡大
マウスオーバーでふわっと拡大します。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DEMO</title>
<link href="style.css" rel="stylesheet" media="all">
<link href="default.css" rel="stylesheet" media="all">
</head>
<body>
<a href="#" class="usagi">
<img src="img/usagi.png" >
</a>
</body>
</html>
CSS
@charset "UTF-8";
body {
margin: 0 0;
}
.usagi img {
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}
.usagi img:hover {
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
}
短い記述でカンタンに実装できます！
DEMOはこちら
マウスオーバーで儚く消える
マウスオーバーですごく儚く消えちゃいます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DEMO</title>
<link href="style.css" rel="stylesheet" media="all">
<link href="default.css" rel="stylesheet" media="all">
</head>
<body>
<img src="img/usagi.png" class="fade">
</body>
</html>
CSS
@charset "UTF-8";
body {
margin: 0 0;
}
.fade {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.fade:hover {
opacity: 0;
filter: alpha(opacity=60);
}
cssを変えてあげれば透明度、消えていく秒数も変更できます。
DEMOはこちら
マウスオーバーでくるっと回転
マウスオーバーでくるっと回転します。
奥行きを感じさせ、気持ち良いです。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>DEMO</title>
<link href="style.css" rel="stylesheet" media="all">
<link href="default.css" rel="stylesheet" media="all">
</head>
<body>
<a href="#" class="usagi">
<span class="front"><img src="img/usagi.png" ></span>
<span class="back"><img src="img/usagi02.png" ></span>
</a>
</body>
</html>
CSS
@charset "UTF-8";
body {
margin: 0 0;
}
.usagi {
color: #fff;
display: block;
text-decoration: none;
width: 200px;
position: relative;
perspective: 300px;
-webkit-perspective: 300px;
}
.usagi span {
text-align: center;
display: block;
width: 200px;
padding: 30px 0;
position:absolute;
top: 0;
margin-top: -30px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: 0.8s;
}
.usagi .back {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.usagi:hover .front {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
}
.usagi:hover .back {
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
}
これだけでおっけい！
DEMOはこちら
ブラウザ確認
これは全てはCSSだけで実装できますが、ここで問題となるのがIEなどのブラウザの壁。
ですが、対応ブラウザを書いてくれているサイトもあります。↓
http://fmbip.com/litmus/
こちらのサイトではCSSのセレクタごとの対応ブラウザも書いていてくれて便利です。
以上、CSSだけで出来る！気持ち良いマウスオーバーアクションまとめでした。
今後、CSSだけでできることが続々増えていってくれることを願いますが、
それとともに対応ブラウザの増加も強く願います。
