项目中经常有用到动画效果，比如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. IOS自定义日历控件的简单实现(附思想及过程)

    因为程序要求要插入一个日历控件,该空间的要求是从当天开始及以后的六个月内的日历,上网查资料基本上都说只要获取两个条件(当月第一天周几和本月一共有多少天)就可以实现一个简单的日历,剩下的靠自己的简单逻辑 ...

  2. 探索javascript----this的指向问题

    *this只和执行环境有关,和声明环境无关.谁调用this,this就指向谁. *this的指向分为四种: 1.作为普通函数调用: 2.作为对象的方法调用:   指向对对象,但用新变量引用该方法时候, ...

  3. 虚拟机下Linux读取USB设备的问题虚拟机下Linux无法读取USB设备的解决方案

    我们在虚拟机中识别USB设备有三种情况导致Linux系统不能读取到USB设备: 1. .当虚拟机的USB服务没有开启的时候 2. 若虚拟机的USB连接的设置选项没有设置好 3. Widows抢先一步, ...

  4. # mysql -u root -p -bash: mysql: command not found

    [root@jboss ~]# mysql -u root -p-bash: mysql: command not found 需要安装mysql # yum install mysql之后就行 了

  5. PHPstorm--ThinkStorm安装

    原文地址 http://www.thinkphp.cn/topic/34518.html​ QQ群: 320655679: 因为公司在使用Ide,来帮助开发,PHPstorm最近很流行,因为他有很多插 ...

  6. 可编辑的div元素去除粘贴复制带来的额外样式，实现纯文本粘贴

    $(function(){ var update = function(original){   var new_content = $('.testmr').html();      var new ...

  7. Cruehead.1

    查壳   没有 我拖 alt+F9 到上面        入口处   下断 关键跳      略过   就没了 要实现 强暴  直接过... 仔细来看看... 那两个调用   都下断   看看  判断 ...

  8. C#知识体系（二）用案例来理解委托与事件

    上一篇博客讲到了LinQ和lambda的常用方法 还有很多我们未知但c#设计团队已经为我们封装好的类和方法.随着我们不断的熟悉C#语言,渐渐的就会接触到其他的知识点,委托.事件.反射.线程.同步,异步 ...

  9. Java(二)

    课后,我查阅相关学习资料和Java API制作了以下界面,界面包含了单选按钮(JRadioButton).复选框(JCheckBox).组合框(JComboBox).单行文本输入框(JTextFiel ...

  10. LINQ To SQL

    议程 1.LINQ To SQL概述 2.LINQ To SQL对象模型 3.LINQ To SQL查询 用到的数据库 SQL Server 2005,数据库名为Test. 两张表,分别为Studen ...