css3 animation实现风车转动

时间 2019-11-12

标签 css3 css animation 实现风车转动栏目 CSS 繁體版

原文原文链接

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

<!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> html

css3 Animation目前浏览器的支持状况：css3

IE10+web

FF31+浏览器

Chrome31 - 42支持带-webkit-前缀的，Chrome43+支持标准css3动画

Safari7 - 8 支持带-webkit-前缀的动画

Opera28 - 29支持带-webkit-前缀的，Opera30+支持url

iOS Safari7.1 - 8.3支持带-webkit-前缀的3d