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可用于刷新按钮或者加载动画的动画的更多相关文章
- iscroll.js 下拉刷新和上拉加载
		
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
 - 使用pjax时点击浏览器刷新按钮仅加载内容页的解决办法
		
pjax可以实现ajax的局部刷新功能,同时能改变地址栏的URL,因此支持浏览器的后退和前进功能. 但是,在使用中,若没有正确使用,仍然会出现一些问题. 比如,我们在使用pjax后,能够在不加载整个页 ...
 - react-native 模仿原生 实现下拉刷新/上拉加载更多(RefreshListView)
		
1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...
 - react-native ListView 封装 实现 下拉刷新/上拉加载更多
		
1.PageListView 组件封装 src/components/PageListView/index.js /** * 上拉刷新/下拉加载更多 组件 */ import React, { Com ...
 - JS+CSS实现的下拉刷新/上拉加载插件
		
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
 - 移动端下拉刷新上拉加载-mescroll.js插件
		
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
 - js 前端实现下拉刷新  上拉加载
		
效果 css html,body{ height:100%; // 其他界面未设置html 无法监听scroll } /* 下拉刷新 */ .refresh-loading { transition: ...
 - 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
		
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
 - H5下拉刷新和上拉加载实现原理浅析
		
前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...
 
随机推荐
- [原创]cocos2d-x研习录-第二阶 概念类之布场层类(CCLayer)
			
上面说场景CCScene相当于一个大容器,那么布景层类CCLayer就是大容器里的若干个小容器.每个游戏场景CCScene会有很多层CCLayer,每一层CCLayer负责各自的任务.看一下CCLay ...
 - Mac OS X 上Lua的安装方法
			
先在Mac OS的终端查询下本机是否已安装Lua Last login: Thu Jul 10 07:54:48 on ttys000 keshans-Mac-mini:~ keshan$ lua - ...
 - 快速使用node.js进行web开发
			
首先关于node.js的学习,这里推荐一本比较好的教程,nodejs web开发指南,该书通俗易懂地将node.js语言特性讲解完之后,又从一个项目角度带领读者使用node.js学习web开发.相信这 ...
 - 【java】 linux下利用nohup后台运行jar文件包程序
			
Linux 运行jar包命令如下: 方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 ...
 - 修改mongodb3.0副本集用户密码遇到的坑
			
最近公司对项目安全方面的问题很是重视,进行了多次各种安全漏洞的扫描,于是乎就扫到了mongodb弱口令的问题. 在项目部署初期,因为大家对这个都不是特别重视,大概是因为觉得反正是内网项目吧,所以mon ...
 - C++中没有finally,那么应该在如何关闭资源
			
这是一篇有趣的帖子 原文链接: http://bbs.csdn.net/topics/90070457 楼主: C++中没有finally,那么应该在哪里关闭资源? C++的try{}catch(){ ...
 - ADF_Starting系列8_使用EJB/JPA/JSF通过ADF构建Web应用程序之扩展UI Method
			
2013-05-01 Created By BaoXinjian
 - laravel 指定 版本安装
			
composer create-project laravel/laravel=5.0.* --prefer-dist composer create-project laravel/laravel= ...
 - MYSQL C API : mysql_real_escape_string     二进制数据存储
			
#include <iostream> #include <string> #include <string.h> #include <mysql.h> ...
 - System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件
			
重新系统后,iis asp.net站点老是出现: System.Web.HttpCompileException (0x80004005): (0): error CS0016: 未能写入输出文件“c ...