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可用于刷新按钮或者加载动画的动画的主要内容,如果未能解决你的问题,请参考以下文章

URL到页面加载;css3动画与js动画;水平垂直居中

jquery插件,用于轻松创建加载css3/images动画

原生JS+ CSS3创建loading加载动画;

纯css3 加载loading动画特效

如何用canvas或者css完成动态加载显示这个动画

这种加载动画代码怎么实现?不使用图片