css3 animation实现风车转动

zoukankan html css js c++ java

css3 animation实现风车转动

　　项目中经常有用到动画效果，比如Loading、风车转动等等。最简单的办法是使用gif，但是gif在半透明背景下有白边，体验不友好，好在现在可以使用css3的anmiation来实现动画效果，极大的提升了用户体验。下面是风车转动效果实现demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>风车 - css3动画示例</title> <style type="text/css"> .windmill { 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-前缀的

查看全文

相关阅读:
Atitit 提升开发进度大方法--高频功能与步骤的优化类似性能优化
 Atitit 翻页功能的解决方案与版本历史 v4 r49
Atitit.pagging 翻页功能解决方案专题与目录大纲 v3 r44.docx
Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx
Atitit easyui翻页组件与vue的集成解决方案attilax总结
 Atitit 技术经理职责与流程表总结
 Atitit 数据库视图与表的wrap与层级查询规范
 Atitit 手机图片备份解决方案attilax总结
 Atitit 提升进度的大原则与方法高层方法 attilax总结
 Atiitt 使用java语言编写sql函数或存储过程

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