发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。
<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml”><br /><head><br /><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><br /><title>css3 大风车</title><br /><style><br />*{margin:0; padding:0}<br />.windmill{ padding:10px; width:400px; height:400px; position:relative;<br />animation-name:moveWindmill;<br />animation-duration:4s;<br />animation-timing-function:linearanimation-delay:0;<br />animation-iteration-count:infinite;<br />animation-play-state:running;<br />/* Firefox: */<br />-moz-animation-name:moveWindmill;<br />-moz-animation-duration:4s;<br />-moz-animation-timing-function:linear;<br />-moz-animation-delay:0;<br />-moz-animation-iteration-count:infinite;<br />-moz-animation-play-state:running;<br />-webkit-animation-name:moveWindmill;<br />-webkit-animation-duration:4s;<br />-webkit-animation-timing-function:linear;<br />-webkit-animation-delay:0;<br />-webkit-animation-iteration-count:infinite;<br />-webkit-animation-play-state:running;<br />-ms-animation-name:moveWindmill;<br />-ms-animation-duration:4s;<br />-ms-animation-timing-function:linear;<br />-ms-animation-delay:0;<br />-ms-animation-iteration-count:infinite;<br />-ms-animation-play-state:running;<br />}<br />.windmill div{ position:absolute; width:100px; height:50px;left:50%; top:50%; border-radius:0 0 50px 50px ; -moz-transform-origin:0% 0%;-webkit-transform-origin:0% 0%;-ms-transform-origin:0% 0%;}<br />.windmill .red{ background-color:red; background: -moz-radial-gradient(right, circle,red , #000);<br /> background: -webkit-radial-gradient(right, circle,red , #000);<br />}<br />.windmill .yellow{transform:rotate(90deg); -ms-transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); background-color:yellow; background: -moz-radial-gradient(right, circle,yellow , #000); background: -webkit-radial-gradient(right, circle,yellow , #000); background: -ms-radial-gradient(right, circle,yellow , #000);}<br />.windmill .blue{transform:rotate(180deg);-ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); background-color:blue; background: -moz-radial-gradient(right, circle,blue , #000); background: -webkit-radial-gradient(right, circle,blue , #000); }<br />.windmill .green{transform:rotate(270deg); -ms-transform:rotate(270deg);-moz-transform:rotate(270deg);-webkit-transform:rotate(270deg); background-color:green; background:radial-gradient(right, circle,green , #000);background: -moz-radial-gradient(right, circle,green , #000); background: -webkit-radial-gradient(right, circle,green , #000); background: -ms-radial-gradient(right, circle,green , #000); } <div class="pagination"><a title="Page"> <b>1</b>/<b>4</b> </a> <b>1</b> <a href="/cos/2020/0428/500308_2.shtml">2</a> <a href="/cos/2020/0428/500308_3.shtml">3</a> <a href="/cos/2020/0428/500308_4.shtml">4</a> <a href="/cos/2020/0428/500308_2.shtml">下一页</a> <a href="/cos/2020/0428/500308_4.shtml">尾页</a></div> </div> </div> </div> <div class="postMore"> <div class="tab" id="tab"> <span class="active">相关文章</span> <span>大家在看</span> </div> <div class="tabdiv"> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <div class="tabpane"> <ul class="articleBar"> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0307/1096003.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg" src="https://www.easck.com/d/file/p/2023/03-07/small64de5a987d413792a57951e70b9913171678151164.jpg"></div> <div class="txtInfo"><h3>H5页面使用audio标签播放音频</h3><div class="extr clearfix"><p><span class="time fl">2023-03-07</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0227/1094447.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg" src="https://www.easck.com/d/file/p/2023/02-27/202302271802243422.jpg"></div> <div class="txtInfo"><h3>2345手机助手怎么下载音乐/铃声 2345手机助手下载音</h3><div class="extr clearfix"><p><span class="time fl">2023-02-27</span></p><p><span class="time fr">0万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0212/1090698.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg" src="https://www.easck.com/d/file/p/2023/02-12/202302121855452653.jpg"></div> <div class="txtInfo"><h3>靠谱助手怎么ROOT 靠谱助手一键root图文教程</h3><div class="extr clearfix"><p><span class="time fl">2023-02-12</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090498.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111800181991.jpg"></div> <div class="txtInfo"><h3>js开发中的页面、屏幕、浏览器的位置原理（高度宽度）说明</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0211/1090469.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg" src="https://www.easck.com/d/file/p/2023/02-11/202302111532411251.jpg"></div> <div class="txtInfo"><h3>安卓模拟器bluestacks安装不了解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-02-11</span></p><p><span class="time fr">8万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0130/1088144.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp" src="https://www.easck.com/d/file/p/2023/01-30/20230130100012236.webp"></div> <div class="txtInfo"><h3>CSS填充和宽高详解</h3><div class="extr clearfix"><p><span class="time fl">2023-01-30</span></p><p><span class="time fr">9万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0118/1087028.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg" src="https://www.easck.com/d/file/p/2023/01-18/202301180242485722.jpg"></div> <div class="txtInfo"><h3>photoshop打造真人手绘图</h3><div class="extr clearfix"><p><span class="time fl">2023-01-18</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0108/1084966.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg" src="https://www.easck.com/d/file/p/2023/01-08/202301081921392675.jpg"></div> <div class="txtInfo"><h3>XSplit登陆慢、无法登陆的解决办法</h3><div class="extr clearfix"><p><span class="time fl">2023-01-08</span></p><p><span class="time fr">4万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084604.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071725482667.jpg"></div> <div class="txtInfo"><h3>电子书制作排版教程</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">18万阅读</span></p></div></div> </a> </li> <li class="imgBar"> <a class="linkBar clearfix" href="/cos/2023/0107/1084448.shtml"> <div class="imgInfo"><img webp="true" class="lazy" data-original="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg" src="https://www.easck.com/d/file/p/2023/01-07/202301071300321076.jpg"></div> <div class="txtInfo"><h3>PP加速器新窗口独立视频功能</h3><div class="extr clearfix"><p><span class="time fl">2023-01-07</span></p><p><span class="time fr">3万阅读</span></p></div></div> </a> </li> </ul> </div> </div> <footer> <p><a href="https://www.easck.com">电脑版</a> - <a href="https://wap.easck.com">移动首页</a></p> <div style="display:none"><script type="text/javascript" src="/skin/wap/tongji.js"></script></div> </footer> <script type="application/ld+json"> { "@context": "https://zhanzhang.baidu.com/contexts/cambrian.jsonld", "@id": "https://wap.easck.com/cos/2020/0428/500308.shtml", "title": "CSS3 制作旋转的大风车(充满童年回忆)-易采站长站", "description": "发一个很久以前的作品，当开始得知CSS3可以做动画时，就很想玩玩，于是就做了个充满童年回忆的大风车。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml", "pubDate": "2020-04-28 T 08:10:02+08:00", "upDate": "2020-04-28 T 08:10:02+08:00", "data":{ "WebPage":{ "pcUrl":"https://www.easck.com/cos/2020/0428/500308.shtml", "wapUrl":"https://www.easck.com/cos/2020/0428/500308.shtml", "fromSrc":"易采站长站" } } } </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>
