css3 animation实现风车

时间：2015-06-01 18:23:00 阅读：339 评论：0 收藏：0 [点我收藏+]

标签：

　　项目中经常有用到动画效果，比如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实现风车

标签：

原文地址：http://www.cnblogs.com/typeof/p/4544547.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行