用html怎么制作风车,css3 animation实现风车转动

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

风车 - css3动画示例

.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;