| <!DOCTYPE html> | |
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <title>css3八卦</title> | |
| <style> | |
| body{background-color: lightgray;} | |
| @-webkit-keyframes yidong{ | |
| 100%{transform: translate(200px) rotate(720deg)} | |
| } | |
| #bagua{ | |
| width: 200px; | |
| height: 100px; | |
| background-color: #fff; | |
| border-bottom: 100px solid #000; | |
| border-radius: 50%; | |
| position: relative; | |
| -webkit-animation: yidong 10s ease 0.1s forwards; | |
| } | |
| #bagua:before{ | |
| content: ""; | |
| width: 36px; | |
| height: 36px; | |
| border: 32px solid #000; | |
| background-color: #fff; | |
| position: absolute; | |
| top: 50px; | |
| border-radius: 50%; | |
| } | |
| #bagua:after{ | |
| content: ""; | |
| width: 36px; | |
| height: 36px; | |
| border: 32px solid #fff; | |
| background-color: #000; | |
| position: absolute; | |
| top: 50px; | |
| left: 100px; | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bagua"></div> | |
| </body> | |
| </html> |
原文：http://www.cnblogs.com/135wxp/p/5770189.html