项目中经常有用到动画效果，比如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. 使用cocoapods碰到的难题

    -------------报错---------- 1. git clone error: RPC failed; result=56, HTTP code = 200 解决办法: git confi ...

  2. 在IIS Express中调试时无法读取配置文件 错误

    在IIS Express中调试代码时,如果出现"无法读取配置文件"的问题(如图),这种情况是IIS Express的"applicationhost.config&quo ...

  3. Android 中dp和px

    dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如: 在320x480分辨率,像素密度为160,1dp=1px 在480x800分辨率,像素密度为240,1dp=1.5px 计算公式: 1dp* ...

  4. ScorllView中嵌套listView与Viewpager的焦点问题处理

    解决进入该页面直接显示中的listview而不是从页面最顶端开始显示在setAdapter后调用listview的smoothScrollTo(0,20); 解决listview只能显示一条 需要重写 ...

  5. AJAX请求WebService

    1.WebService代码 [WebMethod] [ScriptMethod(UseHttpGet = false)] public string GetObject() { User user ...

  6. 华为交换机sflow配置

    华为交换机sflow功能配置 1.配置交换机的sflow流发送 [系统视图]sflow agen ip  x.x.x.x                 设置sflow输出源 [系统视图]sflow ...

  7. UI1_第一天_iOS概述

    iOS:移动操作系统  ------------>ios7.0变化大,倾向于扁平化 UI:用户界面,即各种页面元素 创建工程 Xcode ios -->Application —>模 ...

  8. CSS3阴影 box-shadow的使用和技巧总结

    text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...

  9. 黑马程序员：Java编程_7K面试题之交通灯管理系统

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: 异步随机生成按照各个路线行 ...

  10. POJ 2653

    题目大意:一个小孩不断往地上扔棍子,共n根,求结束后共有多少根不与去他相交. 解法思路:典型的判断线段相交问题,利用快速排斥+双跨立判断相交,最后输出没相交的. (图片来源:http://www.2c ...