CSS3,JS可用于刷新按钮或者加载动画的动画
Posted ruoyuting
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS3,JS可用于刷新按钮或者加载动画的动画相关的知识,希望对你有一定的参考价值。
html:
<input type="button" id="zidong3" style="top: 12px;" />
css:
#zidong3
{
position: absolute;
top: 7px;
right: 7px;
width: 24px;
height: 24px;
border: none;
background: #fff url(../images/refresh.png) no-repeat;
background-size: 100% 100%;
/*background-position: -1px 5px;*/
border-radius: 50%;
}
/*重点:*/
@-webkit-keyframes gira {
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
@keyframes gira {
from{-webkit-transform: rotate(0deg); transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg); transform: rotate(360deg)}
}
JS:
$("#zidong3").click(function () {
$(this).css("-webkit-animation", "gira 1s ease-out 1");
$(this).css("-ms-animation", "gira 1s ease-out 1");
$(this).css("animation", "gira 1s ease-out 1");
var z = $(this);
setTimeout(function () {
$(z).css("animation", "");
}, 1000);
//getGPS();//获取位置
});
有时间说明
以上是关于CSS3,JS可用于刷新按钮或者加载动画的动画的主要内容,如果未能解决你的问题,请参考以下文章