项目中经常有用到动画效果，比如Loading、风车转动等等。最简单的办法是使用gif，但是gif在半透明背景下有白边，体验不友好，好在现在可以使用css3的anmiation来实现动画效果，极大的提升了用户体验。下面是风车转动效果实现demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>风车 - css3动画示例</title>
<style type="text/css">
.windmill {
width: 110px;
height: 160px;
overflow: hidden;
background: url(http://115.29.225.190/fiddle/css3/windmill.png) no-repeat;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-animation: earthDay 2.5s linear infinite;
animation: earthDay 2.5s linear infinite;
}

@keyframes earthDay {
7.99% {
background-position: 0 0;
}
8% {
background-position: 0 -160px;
}
15.99% {
background-position: 0 -160px;
}
16% {
background-position: 0 -320px;
}
23.99% {
background-position: 0 -320px;
}
24% {
background-position: 0 -480px;
}
31.99% {
background-position: 0 -480px;
}
32% {
background-position: 0 -640px;
}
39.99% {
background-position: 0 -640px;
}
40% {
background-position: 0 -800px;
}
47.99% {
background-position: 0 -800px;
}
48% {
background-position: 0 -960px;
}
55.99% {
background-position: 0 -960px;
}
56% {
background-position: 0 -1120px;
}
63.99% {
background-position: 0 -1120px;
}
64% {
background-position: 0 -1280px;
}
71.99% {
background-position: 0 -1280px;
}
72% {
background-position: 0 -1440px;
}
79.99% {
background-position: 0 -1440px;
}
80% {
background-position: 0 -1600px;
}
87.99% {
background-position: 0 -1600px;
}
88% {
background-position: 0 -1760px;
}
99.99% {
background-position: 0 -1760px;
}
100% {
background-position: 0 -160px;
}
}

@-webkit-keyframes earthDay {
7.99% {
background-position: 0 0;
}
8% {
background-position: 0 -160px;
}
15.99% {
background-position: 0 -160px;
}
16% {
background-position: 0 -320px;
}
23.99% {
background-position: 0 -320px;
}
24% {
background-position: 0 -480px;
}
31.99% {
background-position: 0 -480px;
}
32% {
background-position: 0 -640px;
}
39.99% {
background-position: 0 -640px;
}
40% {
background-position: 0 -800px;
}
47.99% {
background-position: 0 -800px;
}
48% {
background-position: 0 -960px;
}
55.99% {
background-position: 0 -960px;
}
56% {
background-position: 0 -1120px;
}
63.99% {
background-position: 0 -1120px;
}
64% {
background-position: 0 -1280px;
}
71.99% {
background-position: 0 -1280px;
}
72% {
background-position: 0 -1440px;
}
79.99% {
background-position: 0 -1440px;
}
80% {
background-position: 0 -1600px;
}
87.99% {
background-position: 0 -1600px;
}
88% {
background-position: 0 -1760px;
}
99.99% {
background-position: 0 -1760px;
}
100% {
background-position: 0 -160px;
}
}
</style>
</head>
<body>
<div class="windmill"> </div>
</body>
</html>

css3 Animation目前浏览器的支持情况：

IE10+

FF31+

Chrome31 - 42支持带-webkit-前缀的，Chrome43+支持标准

Safari7 - 8 支持带-webkit-前缀的

Opera28 - 29支持带-webkit-前缀的，Opera30+支持

iOS Safari7.1 - 8.3支持带-webkit-前缀的

css3 animation实现风车转动的更多相关文章

  1. 实现了一个百度首页的彩蛋——CSS3 Animation简介

    在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...

  2. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  3. CSS3 Animation Cheat Sheet：实用的 CSS3 动画库

    CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画.所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类 ...

  4. css3 animation 属性众妙

    转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...

  5. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  6. 第四十一课：CSS3 animation详解

    animation是css3的另一个重要的模块,它成型比transition晚,吸取了Flash的关键帧的理念,实用性高. animation是一个复合样式,它可以细分为8个更细的样式. (1)ani ...

  7. CSS3 animation 与JQ animate()的区别

    CSS3 与 JQ 根本区别 css3 animation与jQuery animate()区别在于实现机制不同 C3和JQ 完成动画的优缺点 1.css3中的过渡和animation动画都是基于cs ...

  8. CSS3(animation, trasfrom)总结

    CSS3(animation, trasfrom)总结 1. Animation 样式写法: 格式: @-浏览器内核-keyframes 样式名 {} 标准写法(chrome safari不支持 @k ...

  9. CSS3 animation 练习

    css3 的动画让 html 页面变得生机勃勃,但是如何用好动画是一门艺术,接下来我来以一个demo为例,来练习css3 animation. 我们先详细了解一下animation 这个属性. ani ...

随机推荐

  1. GreenDao数据库框架的配置与增删改查

    并非原创,原创地址http://blog.csdn.net/njweiyukun/article/details/51893092 配置-------------------------------- ...

  2. 史上最简单的socket

    1. client import java.io.IOException; import java.io.OutputStream; import java.net.Socket; import ja ...

  3. webdynpro

    -------------------------------------------------------------------------------------WebDynpro For A ...

  4. android的apk逆向工程后的文件目录介绍

    一.用压缩软件打开apk,得到五个文件或文件夹 1.META-INF 2.res 3.AndroidManifest.xml 4.classes.dex 5.resources.arsc 二.xml文 ...

  5. 一些初级Java错误,不定期增加

    1. Error: Dangling meta character '*' near index 0 对字符串使用split()方法截取 * ? + / | 等字符的时候会报以下异常 Dangling ...

  6. linux下解压war文件命令

    jar -xvf project.war -->解压到当前目录下. -f  指定 JAR 文件名,通常这个参数是必须的 -v  显示过程信息

  7. [解决方案] pythonchallenge level 3

    http://www.pythonchallenge.com/pc/def/equality.html 根据页面提示:一个小写字母刚刚好被左右3个大写字母包围. 查看页面代码得到需要处理的字符. 将字 ...

  8. sshd 指定端口，指定秘钥文件

     scp -i ~/test -P22219 SRC/ root@10.2.227.76:/data/ #sshd的端口指定的是22219,  -i 指定秘钥文件   指定秘钥文件需要注意的是,需要提 ...

  9. softwareTesting_work1

    1.12306手机APP软件测评 首先是软件界面,iPhone版本和android版本长得是一模一样,虽然是注重功能的软件,但是一样样的界面让人完全感受不到软件设计者的诚意啊. 还有就是软件图片和图标 ...

  10. ABAP工作区，内表，标题行的定义和区别

         工作区域跟变量一样,是用来保存数据的.区别是变量只能从中保存一个数据.而工作区域可以存放多个.把多个数据合在一起就成工作区域了.下面我们来看看工作区域是如何定义的吧.定义有四种方法,如下:1 ...