使用CSS3中的伪元素选择器加HTML5实现太极八卦图
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>太极八卦</title> <style> body { background-color: rgb(24, 147, 168); } .father { position: relative; top: 100px; left: 60%; width: 400px; height: 400px; /* background-color: #; */ /* margin: 100px 0 0 25%; */ border-radius: 50%; overflow: hidden; /* transform:rotate(360deg); */ transition: all 10s; } .father1 { position: relative; top: -300px; left: 20%; width: 400px; height: 400px; /* background-color: #; */ /* margin: 100px 25% 0 0; */ border-radius: 50%; overflow: hidden; /* transform:rotate(360deg); */ transition: all 5s; } .son-l { float: left; width: 200px; height: 400px; /* border-radius: 50%; */ background-color: #fff; } .son-r { float: left; width: 200px; height: 400px; background-color: #000; } .father::before, .father1::before { position: absolute; top: 0; left: 50%; margin-left: -100px; width: 200px; height: 200px; content: ""; background-color: #000; border-radius: 50%; } .father1::after, .father::after { position: absolute; bottom: 0; left: 50%; margin-left: -100px; width: 200px; height: 200px; content: ""; background-color: #fff; border-radius: 50%; } .son-t { position: absolute; top: 50px; left: 50%; margin-left: -50px; width: 100px; height: 100px; background-color: #fff; border-radius: 50%; } .son-b { position: absolute; bottom: 50px; left: 50%; margin-left: -50px; width: 100px; height: 100px; background-color: #000; border-radius: 50%; z-index: 1; } /* .father:hover, */ body:hover .father , body:hover .father1 { transform: rotate(36000deg); /* 600px; */ } </style> </head> <body> <div class="father"> <div class="son-l"> </div> <div class="son-r"> </div> <div class="son-t"></div> <div class="son-b"></div> </div> <div class="father1"> <div class="son-l"> </div> <div class="son-r"> </div> <div class="son-t"></div> <div class="son-b"></div> </div> </body> </html>