⽤html怎么制作风车,css3animation实现风车转动
项⽬中经常有⽤到动画效果，⽐如Loading、风车转动等等。最简单的办法是使⽤gif，但是gif在半透明背景下有⽩边，体验不友好，好在现在可以使⽤css3的anmiation来实现动画效果，极⼤的提升了⽤户体验。下⾯是风车转动效果实现demo
风车 - css3动画⽰例
.windmill {
width: 110px;
height: 160px;
overflow: hidden;
-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% {
html代码转链接
background-position: 0 -1760px;
}
99.99% {
background-position: 0 -1760px;
}
100% {
background-position: 0 -160px;
}
}
css3 Animation⽬前浏览器的⽀持情况：
IE10+
FF31+
Chrome31 - 42⽀持带-webkit-前缀的，Chrome43+⽀持标准Safari7 - 8 ⽀持带-webkit-前缀的
Opera28 - 29⽀持带-webkit-前缀的，Opera30+⽀持
iOS Safari7.1 - 8.3⽀持带-webkit-前缀的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。