- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title > 转动 </title>
- <style type="text/CSS">
- *{margin:0;padding:0;}
- main {width:200px; height:200px; margin:200px auto; position:relative;}
- .huanban{ position:relative; width:200px; height:200px;overflow:hidden; cursor:pointer; animation:myfirst 5s linear 2s infinite normal; -webkit-animation:myfirst 5s linear 2s infinite normal;}
- .huanban li { width:100px; height:100px; background:#f00;float:left;list-style:none; border-radius:100% 0;}
- .huanban li.yi,.huanban li.si { width:100px; height:100px; background:#f00;float:left;list-style:none; border-radius:0 100%;}
- .circle { width:20px; height:20px; background:#FFF; border-radius:100%; position:absolute; top:90px; left:90px;}
- .line { position:absolute; left:100px; top:110px; border:1px solid red; height:200px; width:1px; background:red;}
- @keyframes myfirst{
- 0% { transform:rotate(0deg);}
- 20% { transform:rotate(72deg);}
- 40% { transform:rotate(144deg);}
- 60% { transform:rotate(216deg);}
- 80% { transform:rotate(288deg);}
- 100% { transform:rotate(360deg);}
- }
- @-webkit-keyframes myfirst{
- 0% { transform:rotate(0deg);}
- 20% { transform:rotate(72deg);}
- 40% { transform:rotate(144deg);}
- 60% { transform:rotate(216deg);}
- 80% { transform:rotate(288deg);}
- 100% { transform:rotate(360deg);}
- }
- </style>
- </head>
- <body>
- <div id="main">
- <ul class="huanban">
- <li class="yi"></li>
- <li class="er"></li>
- <li class="san"></li>
- <li class="si"></li>
- <div class="circle"></div>
- </ul>
- <div class="line"></div>
- </div>
- </body>
</html > 代码片段 1
- <!DOCTYPE HTML>
- <html lang="en-US">
- <head>
- <meta charset="UTF-8">
- <title > 转动 </title>
- <style type="text/css">
- *{margin:0;padding:0;}
- #main {width:200px; height:200px; margin:200px auto; position:relative;}
- .huanban{ position:relative; width:200px; height:200px;overflow:hidden; cursor:pointer; animation:myfirst 5s linear 2s infinite normal; -webkit-animation:myfirst 5s linear 2s infinite normal;}
- .huanban li { width:100px; height:100px; background:#f00;float:left;list-style:none; border-radius:100% 0;}
- .huanban li.yi,.huanban li.si { width:100px; height:100px; background:#f00;float:left;list-style:none; border-radius:0 100%;}
- .circle { width:20px; height:20px; background:#FFF; border-radius:100%; position:absolute; top:90px; left:90px;}
- .line { position:absolute; left:100px; top:110px; border:1px solid red; height:200px; width:1px; background:red;}
- @keyframes myfirst{
- 0% { transform:rotate(0deg);}
- 20% { transform:rotate(72deg);}
- 40% { transform:rotate(144deg);}
- 60% { transform:rotate(216deg);}
- 80% { transform:rotate(288deg);}
- 100% { transform:rotate(360deg);}
- }
- @-webkit-keyframes myfirst{
- 0% { transform:rotate(0deg);}
- 20% { transform:rotate(72deg);}
- 40% { transform:rotate(144deg);}
- 60% { transform:rotate(216deg);}
- 80% { transform:rotate(288deg);}
- 100% { transform:rotate(360deg);}
- }
- </style>
- </head>
- <body>
- <div id="main">
- <ul class="huanban">
- <li class="yi"></li>
- <li class="er"></li>
- <li class="san"></li>
- <li class="si"></li>
- <div class="circle"></div>
- </ul>
- <div class="line"></div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16170/d401e1b9738c93088b3cb6a8a19eb041.html