无技术含量 html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 自写太极图
- </title>
- <style type="text/CSS">
- .whole { width: 101px; height: 101px; background: #000; position: absolute;
- border-radius: 50% } .A_div { width: 50px; height: 100px; overflow: hidden;
- float: left } .A_black_div,.A_white_div { width: 100px; height: 100px;
- border-radius: 50% } .A_black_div { background: #000 } .A_white_div { background:
- #fff; margin-left: -50px } .B_B_div,.B_W_div { position: relative; width:
- 50px; height: 50px; border-radius: 50%; margin-left: 25px } .B_B_div {
- background: #000 } .B_W_div { background: #fff } .B_black_div,.B_white_div
- { position: relative; width: 10px; height: 10px; border-radius: 50%; margin-left:
- 20px; top: 20px } .B_black_div { background: #fff } .B_white_div { background:
- #000 } #taiji { animation: circleR 15s linear infinite; } @-webkit-keyframes
- circleR { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform:
- rotate(-360deg); } } @-moz-keyframes circleR { 0% { -moz-transform: rotate(0deg);
- } 100% { -moz-transform: rotate(-360deg); } } @-o-keyframes circleR { 0%
- { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(-360deg); }
- } @-ms-keyframes circleR { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform:
- rotate(-360deg); } } @keyframes circleR { 0% { transform: rotate(0deg);
- } 100% { transform: rotate(-360deg); } }
- </style>
- </head>
- <body>
- <div class="whole" id="taiji">
- <div class="A_div">
- <div class="A_black_div">
- </div>
- </div>
- <div class="A_div">
- <div class="A_white_div">
- </div>
- </div>
- <div class="B_B_div">
- <div class="B_black_div">
- </div>
- </div>
- <div class="B_W_div">
- <div class="B_white_div">
- </div>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/23861/b6eac1e0a84f88171ea175b83017507d.html