マウスストーカー１３-２■画像■　+CSS のくるくるマウス

●2016/09/22：即時関数で囲んで、グローバル変数を消しました。

■画像１個のマウスストーカーのJavaScriptはこちら→　マウスストーカー１■画像■画像１個で１個

上記のマウスストーカーのJavaScriptを改造しました。
CSS の「animation」を追加することで、マウスに追随する画像がクルクル回転するマウスストーカーです。
JavaScriptのソースの中に、
var Acss="animation:kuru 2s linear 0s infinite alternate;";
という指定があります。
興味のある方はmCPブログの「基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編」を参考に、変更してみて下さい。
CSSで指定する「@keyframes ●●{～～～}」とJavaScriptの中で指定する「var Acss="animation:●●～～～;";」を変更すれば、いろいろな動作を作ることができます。

<!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:#fee;}/*★背景色指定。ピンク。不要なら削除*/

/*★★必須。マウスストーカーのくるくるの動きの指定。名前はkuru。お好みで変更可*/
@keyframes kuru {
	from {transform: rotate(0deg);}
	to {transform: rotate(720deg);}
}
--></style>
<!--★コピーここまで　bodyの中にもコピーがあります-->

</head>
<body>

<!--★コピーここから。位置はbodyの中です-->
<script type="text/javascript"><!--
/*=============================================================================
画像１個のくるくるマウスストーカー　参考サイト : http://www5e.biglobe.ne.jp/~purest/javascript/index.html
★古いブラウザ対応分削除し、CSSのanimation追加で、くるくるに改造。　 2016/09/22
=============================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var mga="yt5.png"; //★画像指定
var hx=10;         //★表示位置 x座標。マウスと画像の横位置。マイナスで左
var hy=30;         //★表示位置 y座標。マウスと画像の縦位置。マイナスで上
var Acss="animation:kuru 2s linear 0s infinite alternate;";/*★アニメーション指定。alternateをnormalに変更すると、同じ向きにずっと回転*/

//指定ここまで--------------------------------------------------------------
document.onmousemove=function (e){ var ob=document.getElementById("Mo").style; ob.left=e.pageX+hx+"px"; ob.top=e.pageY+hy+"px";}
document.write("<img src="+mga+" id='Mo' style='position:absolute; "+Acss+"'>");
}());//即時関数終了
// --></script>
<!--★コピーここまで-->

</body>
</html>

マウスストーカー１３-２■画像■ +CSS のくるくるマウス UP日時 : 2016/09/22

　マウスストーカー１３-２■画像■　+CSS のくるくるマウス　　　　UP日時 : 2016/09/22