html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Hello 八卦图 </title>
- <style type="text/CSS">
- *{margin:0;padding:0;}
- #container{
- height:500px;
- width:500px;
- margin:0 auto;
- background:gray;
- position:relative;
- }
- #white{
- width:400px;
- height:400px;
- border-radius:50%;
- background:white;
- position:absolute;
- top:50px;right:50px;
- animation:change 5s;
- animation-iteration-count:infinite;
- animation-timing-function:linear;
- }
- #b-circle{
- background:black;
- height:80px;
- width:80px;
- border-radius:50%;
- position:absolute;
- top:50px;right:-40px;
- }
- #black{
- transform:translate(50px,50px);
- }
- #r{
- transform:translate(-50px,-50px);
- }
- @keyframes change {
- 0%{transform:rotate(0deg);}
- 100%{transform:rotate(360deg);}
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div id="white">
- <div id="black">
- <div id="r" style="height:400px;width:200px; border-radius:400px 0 0 400px;background:black;">
- <div id="box1" style="height:200px;width:100px;border-radius:200px 0 0 200px; background:white;transform: translateX(100px)"></div>
- <div id="box2" style="height:200px;width:100px;border-radius:0 200px 200px 0; background:black;transform: translateX(200px)"></div>
- <div id="w-circle" style="background:white;height:80px;width:80px;border-radius:50%; position:absolute;bottom:50px;right:-40px;"></div>
- <div id="b-circle"></div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43317/6c2613cb971c1f2407e1fc682580003e.html