项目中经常有用到动画效果，比如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. Java泛型学习笔记 - (三)泛型方法

    泛型方法其实和泛型类差不多, 就是把泛型定义在方法上, 格式大概就是: public <类型参数> 返回类型 方法名(泛型类型 变量名) {...}泛型方法又分为动态方法和静态方法,:1. ...

  2. java第一天学习作业及答案

    作业一 一.选择题 1.选出在java中有效的注释声明(AD)(选两项) A.//这是注释 B.*/这是注释*/ C./这是注释 D./*这是注释*/ 2.在控制台运行一个java程序,使用的命名正确 ...

  3. 转:js中this、call、apply的用法

    (一)关于this首先关于this我想说一句话,这句话记住了this的用法你也就差不多都能明白了:this指的是当前函数的对象.这句话可能比较绕,我会举出很多例子和这句话呼应的!(看下文)1.首先看下 ...

  4. 《Java应用程序（Application）》

    在编写Java应用程序(Application)时可以这样: 1,定义包名. 2, 导入相关的包. 3, 定义一个类. 4,定义相关变量. 5,定义构造函数.(在构造函数内调用init()方法和add ...

  5. Fragment的生命周期（三）

    自定义lifecycleoffragment布局文件 在main_activity布局中引用自定义的fragment布局 到logcat中查看程勋运行的结果 代码如下: 自定义的fragment布局: ...

  6. 我们的html

    http://files.cnblogs.com/files/eeroom/mac-Bootstrap.rar http://files.cnblogs.com/files/eeroom/CSharp ...

  7. adb -s emulator-5554 install JDKCast-PAP.apk

    multi-emulators direct to install app adb -s emulator-5554 install JDKCast-PAP.apk

  8. VC保存当面某个区域的图片

    void ViewReportDlg::CopyScreenToBitmap() { CDC *cdc = this->GetDC(); HDC wnd = cdc->GetSafeHdc ...

  9. http://zh.lucida.me/

    一个很厉害的在美国Google的学长的博客

  10. 关于Android 应用保活

    通常情况下 , 公司需要让自己的产品在用户的手机中尽可能存活长的时间,包括不受大数字,手动清理后台等情况的影响.这里给出一种方式 就是 双进程守护: 模型如图所示: 两个service通过aidl的方 ...