コメント |
@DIV
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
/*
アニメーションの実体
※ フレームの最初と最後でどういう状態にするか
※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes doing-rotate {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes doing-rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
doing {
display: block;
visibility: hidden;
border-radius: 50%; /* 元の形状を丸くする為 */
font-size: 18px; /* 位置指定を em でしているので、ここを変更すると半径変更 */
width: 5px; /* サイズ変更 */
height: 5px;
/* em を使うと、font-size にサイズを連動させる事ができる */
/* width: .25em; height: .25em; */
/* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
box-shadow:
0 -.4em 0 0 rgba(50,0,0,1),
-.28em -.28em 0 0 rgba(50,0,0,.75),
-.4em 0 0 0 rgba(50,0,0,.50),
-.28em .28em 0 0 rgba(50,0,0,.25)
;
}
</style>
<div style='position:relative;width:200px;height:200px;'>
<input type="button" id="start" value="start" />
<input type="button" id="stop" value="stop" />
<input type="button" id="move" value="移動" />
<doing style='position:absolute;left:100px;top:100px;'/>
</div>
<script type="text/javascript">
$.extend({
ani_start: function(name) {
$(name).css("visibility", "visible")
.css("animation", ".85s doing-rotate steps(8) infinite");
return $(name);
},
ani_stop: function(name) {
$(name).css("visibility", "hidden")
.css("animation-name", "none");
return $(name);
},
ani_move: function(name,x,y) {
$(name).css("left", x+"px")
.css("top", y+"px");
return $(name);
}
});
$("#start").click( function(){ $.ani_start("doing"); } );
$("#stop").click( function(){ $.ani_stop("doing"); } );
$("#move").click( function(){ $.ani_move("doing",50,50); } );
</script>
@END |