純css3實現的太極八卦並且會轉動的css3特效
阿新 • • 發佈：2019-01-01
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>純CSS3實現太極圖形樣式程式碼 - 程式碼筆記</title> <style> .square{ width:400px;height:400px;position:relative; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); animation:rotate infinite linear 5s;margin:10% auto; -webkit-animation:rotate infinite linear 5s;margin:10% auto; -moz-animation:rotate infinite linear 5s;margin:10% auto; } .rect{width:400px;height:200px;position:relative;border:1px #d2d2d2 solid;border-bottom:none;} .inner_circle{width:200px;height:200px;border-radius:200px;position:absolute;z-index:1;} .dot{width:50px;height:50px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;border-radius:50%;} .rect_one{border-radius:200px 200px 0 0;background:white;} .rect_one_one{bottom:-100px;left:0;background:black;} .rect_one_two{background:white;} .rect_two{border-radius:0 0 200px 200px;background:black;} .rect_two_one{bottom:100px;right:0;background:white;} .rect_two_two{background:black;} @keyframes rotate{ from{ transform:rotate(0deg); -webkit-transform:rotate(0deg); }to{ transform:rotate(360deg); -webkit-transform:rotate(360deg); }} </style> </head> <body> <div class="square"> <div class="rect rect_one"> <div class="inner_circle rect_one_one"> <div class="dot rect_one_two"></div> </div> </div> <div class="rect rect_two"> <div class="inner_circle rect_two_one"> <div class="dot rect_two_two"></div> </div> </div> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>適用瀏覽器:360、FireFox、Chrome、Opera、傲遊、搜狗、世界之窗. 不支援Safari、IE8及以下瀏覽器。</p> <p>來源:<a href="http://www.daimabiji.com/" target="_blank">程式碼筆記</a></p> </div> </body> </html>