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库等.下面是对这两种常见交互基本实现原理的 ...
随机推荐
- python编码-1
help帮助系统,一个好的方法是直接看自带的帮助,尽量不用baidu help()是进入交互式帮助界面 quit是退出交互式帮助界面 [root@kvm1 python]# python Python ...
- maven docker 操作
1. 使用dokerfile 进行构建 创建dockerfile 2. maven 插件 <plugin> <groupId>com.spotify</groupId&g ...
- mac osx 快捷键符号以及意义 触发角:锁屏
快捷键中常用符号⌘(command).⌥(option).⇧(shift).⇪(caps lock).⌃(control).↩(return).⌅(enter). OSX快捷键 快捷键中常用符号 ⌘( ...
- HTTPS_SSL配置的步骤以及原理说明
1.单向认证,就是传输的数据加密过了,但是不会校验客户端的来源 2.双向认证,如果客户端浏览器没有导入客户端证书,是访问不了web系统的,找不到地址,想要用系统的人没有证书就访问不了系统HTTPS概念 ...
- .net 使用ffmpeg.exe进行音频转码
#region 音频转换 private int AudioIntervalTime = 100, iAudio = 0; private string strPath = "D:\\web ...
- 16.检查是否为BST
题目描述 请实现一个函数,检查一棵二叉树是否为二叉查找树. 给定树的根结点指针TreeNode* root,请返回一个bool,代表该树是否为二叉查找树 import java.util.*; /* ...
- Aquarium Cycling
http://www.fishyou.com/aquarium-cycling.php Aquarium Cycling Aquarium cycling actually refers to the ...
- JAVA设计模式之工厂方法模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...
- 静态修饰符(关键字static)
1.Static修饰的方法或变量通常称为类方法和类属性 2.静态方法中不能使用this和super关键字,也不能做为局部变量使用 3.在静态方法中不能访问非静态成员方法和非静态成员变量,但是在非静态成 ...
- Symfony2 资料篇
http://www.chrisyue.com/symfony2-in-action-day-1.html 由于Symfony2现在还没有很完善的中文文档,所以不想看文档的同学可以直接进行点击上面的链 ...