使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转。
代码片段:
<div id="test">
<img src="/CSS3/img/yinyue.png" id="change" /> //图片路径自定义
</div>
CSS样式书写如下:
#change{ position:absolute; right:200px; -webkit-animation:change 2s linear infinite;}
@-webkit-keyframes change
{
0%{-webkit-transform:rotate(0deg);}
50%{-webkit-transform:rotate(180deg);}
100%{-webkit-transform:rotate(360deg);}
}
搞定!!!当然,这里只写了chrome/Safari浏览器的兼容,其它的可再加上:
@-moz-keyframes change{***} 火狐
@-ms-keyframes change{***} IE
@keyframes change{***} W3C
Opera浏览器不支持animation属性!!!
使用CSS3动画属性实现360°无限循环旋转【代码片段】的更多相关文章
- 使用CSS3动画属性实现各种旋转跳跃
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- Css3动画属性总汇
http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...
- CSS3动画属性Transform解读
无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- CSS3动画属性和flex弹性布局各个属性
[CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...
- CSS3动画属性animation的基本用法
CSS3新增了一个令人心动的属性:animation,尽管利用animation做出来的动画没有flash或者javascript做出的动画流畅绚丽,但是从代码量和浏览器性能上有着明显的优点. ani ...
- CSS3动画属性:动画(animation)
一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...
- 移动端 CSS3动画属性
一.transform 转换属性 #1. translate位移 transform : translate(50px,100px); //把元素水平移动 50 像素,垂直移动 100 像素 tran ...
随机推荐
- Bootstrap之Carousel不能自动播放的解决办法(转)
Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...
- mysql order by in 的字符顺序
//MySQL 语句SELECT * FROM `MyTable`WHERE `id` IN (11,1,111) ORDER BY FIELD(`id`, 11,1,111); laravel 框架 ...
- hub config
@echo off title Selenium_Hub cd /d %~dp0 java -jar selenium-server-standalone-2.48.2.jar -role hub - ...
- 【java项目小记--JManager】项目开始原因及github部署
--记于2016-8-11 毕业已三载,忽然想起大学时的毕业设计项目,想到曾在毕业答辩上说,会吸取老师点评并逐渐完善该项目.而今 老师点评已忘了个干净,项目也还是毕业时的样子,正好最近有些时间,打算兑 ...
- Caché数据库学习笔记(5)
目录 Cache数据库方法的RESTful封装 ================================================================ 因为对web serv ...
- javascript 字符串总结
match():查找字符串中特定的字符,如果找到这个字符,则返回这个字符: indexOf():定位这个字符串中某一个指定的字符首次出现的位置: sub():把字符串显示为下标: sup():把字符串 ...
- C++中的一些小知识
判断字符是否为数字 在C/C++中有isdigit()来判断一个字符是否为数字 原型:int isdigit(char c); 用法:#include <ctype.h> (C语言):#i ...
- Sample a balance dataset from imbalance dataset and save it(从不平衡数据中抽取平衡数据,并保存)
有时我们在实际分类数据挖掘中经常会遇到,类别样本很不均衡,直接使用这种不均衡数据会影响一些模型的分类效果,如logistic regression,SVM等,一种解决办法就是对数据进行均衡采样,这里就 ...
- Java集合——ConcurrentHashMap
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- Python:list用法
list是一种有序的集合,可以随时添加和删除其中的元素. 定义 空list >>> a_list=[] >>> a_list [] 普通 >>> ...