css3 animation实现风车转动

　　项目中经常有用到动画效果，比如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-前缀的

posted on 2015-06-01 17:56 Typeof 阅读(824) 评论(0) 编辑收藏举报

刷新页面返回顶部

Typeof

导航

公告

css3 animation实现风车转动