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. 抓包工具PowerSniff-0.1

    做这个程序的意图是wireshark插件编写复杂(虽然也支持lua),而轻量级的工具如smartsniff,minisniff不支持插件化数据分析,各种工具用下来或多或少不顺手.以前写的外挂也都是手工 ...

  2. 032. asp.netWeb用户控件之一初识用户控件并为其自定义属性

    Web用户控件的优点: 可以将常用的内容或者控件以及控件的运行程序逻辑, 设计为用户控件, 以后便可以在多个页面中重复使用该用户控件, 从而省去许多重复性的工作. 如网页上的导航栏, 几乎每个页面都需 ...

  3. [Spring] - 动态设置properties

    Spring的jar包用来做动态properties的getter/setter赋值方法: 1:需要的jar包: spring-beans-3.2.0.RC2.jar commons-logging- ...

  4. SSIS 部署到SQL Job

    微软 BI 系列随笔 - SSIS 基础 - 部署SQL Job 简介 在之前博客中,讲述了如何实现SSIS的项目部署以及利用SSIS的参数与环境加速部署,参见 微软 BI 系列随笔 - SSIS 基 ...

  5. 电脑控制台灯(c# hook,显示室温,联网校正时间)

          突发奇想,于是便写了一个小程序用于控制台灯,这几天功能也在不断的完善中,目前基本已经完成.下面进行功能的简述的代码的分析. 整体设计包含下位机程序和上位机程序.下位机用的c语言,上位机用的 ...

  6. mfc_随机数生成器

    vc++6.0 内涵图

  7. Spring技术揭幕----DispatcherServlet

    Spring MVC是一个MVC模式的实现.在Spring MVC的使用中,需要在web.xml中配置DispatcherServlet,也就是说其核心是一个Servlet,这个DispatcherS ...

  8. Windows下运行python脚本报错“ImportError: No Module named ...”的解决方法

    之前遇到一个问题,在Pycharm或IPython之类的IDE上运行脚本正常,但是直接运行或cmd命令行运行的时候报了模块未能找到的错误--ImportError: No Module named . ...

  9. bootstrap-面板、modal

    面板: <!-- panel 面板 panel-heading 面板头部 panel-title 面板标题样式 panel-body 面板内容 --> <div class=&quo ...

  10. web中session与序列化的问题

    最近在写网上商城项目的时候学习了一个关于session的序列化问题,过来总结一下. 众所周知,session是服务器端的一种会话技术,只要session没有关闭,一个会话就会保持.这里先引出一个问题: ...