CSS3 制作旋轉的大風車(充滿童年回憶)

2024-07-11 08:34:15

字體：大中小

來源：轉載

供稿：網友

發一個很久以前的作品，當開始得知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); } </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/07-11/1341681.html'>如何在class內寫xsl標記注意事項</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/07-11/1341683.html'>inline-block空隙之css letter-spacing與字體大小/字體關系數據表</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發表評論</strong></td> <td align="right"><a href="/e/pl/?classid=215&id=1341682">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=215&id=1341682&down=2"></script></span>條評論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">

學習交流