ふわふわ４■CSSふわふわ天使

●2016/04/28：CSSのみ使用なので、JavaScriptのグローバル変数はありません。
画像にマウスオーバーで、揺れが停止します。画像から離れると、また揺れます。
前回掲載分はJavaScript使用でしたが、今回はCSSのみの使用です。前回掲載分は削除しました。

CSSを使った指定方法は、mCPブログの「基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編」と、それよりも詳細な Lopan.jp の「animationプロパティ」から。

画像のマウスオンでふわふわを停止させるために使用した「 :not()」については、AllAbout の「条件に外れた場合だけ装飾するCSS3「:not()」の使い方」から。
「.クラス名:not(:hover)」で、マウスオーバー時にふわふわの動作を停止することができます。

見本では、ふわふわの動作指定は「huwa」１種類だけですが、画像ごとに別の動作指定を付けてもいいです。
また、「huwa」１種類の動作を、時間指定等を変化させることで「class="Yure1"」「class="Yure2"」の２種類にして、画像ごとに動作に変化を付けていますが、「class="Yure1"」の１種類だけにしてもかまいません。

CSSの長所は、同じ「class名」を付けることで複数の画像に動作させることが簡単にできる点です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ふわふわ４■CSSふわふわ天使</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{ background:url(../bg/sora1.jpg) #eef; }/*★背景画像指定。不要なら削除*/

/*★notはマウス・ホバーで無い時の意味。「class="Yure1"」用のhuwaの時間指定。1sは1秒*/
.Yure1:not(:hover){ animation: huwa 3s linear 0.5s infinite; }

/*★notはマウス・ホバーで無い時の意味。「class="Yure2"」用のhuwaの時間指定。1sは1秒*/
.Yure2:not(:hover){ animation: huwa 1.5s linear 0s infinite alternate; }

/*★ふわふわの動きの指定。名前はhuwa*/
@keyframes huwa {
    0%{transform: translate(0px, 0px);}
    25% {transform: translate(-5px, 5px);}
    50%{transform: translate(-10px, 0px);}
    75% {transform: translate(-5px, -5px);}
}
--></style>
<!--★ここまでコピー　bodyの中にもコピーがあります-->

</head>
<body>

<p style="text-align:center;">■画像マウスオンで、ふわふわが停止します■</p>

<!--★コピーここから-->
<!--★↓ふわふわする画像指定。増減可能。「class="Yure1"」か「class="Yure2"」の指定で揺れ方が変化します。指定はお好みで-->

<a href="../link.html"><img src="me2.gif" class="Yure1" alt="" title="１．クリックでリンクページへ" ></a>
<img src="me2.gif" class="Yure2" alt="" title="２．リンク無しです">
<a href="../link.html"><img src="msd_o150.png" class="Yure1" alt="" title="３．クリックでリンクページへ"></a>
<img src="msd_r200.png" class="Yure2"  style="position:absolute; top:100px; right:100px;"alt="" title="４．リンク無しです">

<!--★画像指定終了。コピーここまで-->

</body>
</html>

ふわふわ４■ふわふわ天使 UP日時 : 2016/04/28

　ふわふわ４■ふわふわ天使　　　　UP日時 : 2016/04/28