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可用于刷新按钮或者加载动画的动画的更多相关文章

  1. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  2. 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法

    pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...

  3. react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  4. react-native ListView 封装 实现 下拉刷新/上拉加载更多

    1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...

  5. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  6. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  7. js 前端实现下拉刷新 上拉加载

    效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...

  8. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  9. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

随机推荐

  1. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  2. 转-利用Oracle审计功能来监测试环境的变化

    http://blog.csdn.net/luowangjun/article/details/5627102利用Oracle审计功能来监测试环境的变化 做过测试的人都应该会碰到这样的情况:测试发现的 ...

  3. python-RabbitMQ基础篇

    一.RabbitMQ简单介绍 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue,  ...

  4. Ajax封装方法

    /* 调用方法 setInterval(function(){     ajax('get','json_php_html.php','',function(data){     data = JSO ...

  5. java 里面的string 和byte[] 怎么互转

    public class TestBytes { private static String FORMAT = "UTF-8"; public static void main(S ...

  6. CDN的实现原理

    在描述CDN的实现原理,让我们先看传统的未加缓存服务的访问过程,以便了解CDN缓存访问方式与未加缓存访问方式的差别: 用户提交域名→浏览器对域名进行解释→得到目的主机的IP地址→根据IP地址访问发出请 ...

  7. Mysql对用户操作加审计功能——初级版

    在某些应用里,需要知道谁对表进行了操作,进行了什么操作,所为责任的追朔.在MYSQL里,可以使用触发器实现. 1:创建测试表 mysql> create table A(a int);Query ...

  8. 标准库函数atoi的实现

    标准库函数atoi用于将字符串类型的数据转换为整形数据:在转换过程中要考虑空指针.空字符串"".正负号,溢出等情况 这里是将字符串str转换为32位整型,其正数的最值为0x7FFF ...

  9. Java Socket网络编程的经典例子(转)

    事实上网络编程简单的理解就是两台计算机相互通讯数据而已,对于程序员而言,去掌握一种编程接口并使用一种编程模型相对就会显得简单的多了,Java SDK提供一些相对简单的Api来完成这些工作.Socket ...

  10. RxJava_ _学了下RxJava

    之前就知道有RxJava这玩意,知道这玩意很屌,不过也就止于看看标题,看几段介绍的程度(懒癌害人不浅).这周心血来潮,抽空把之前收藏的 扔物线 大神写的RxJava入门文章看了. http://gan ...