CSS製作太極
阿新 • • 發佈：2018-12-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>太極</title> <style> .taiji{ width: 200px; height: 400px; background: #fff; border-right:200px solid #333; border-radius: 50%; position: relative; transition: all 2s; margin:0 auto; } .taiji::before{ content: ""; display: block; width: 60px; height: 60px; border: 70px solid #fff; position: absolute; border-radius: 50%; top: 0; left: 50%; background: #333; } .taiji::after{ content: ""; display: block; width: 60px; height: 60px; background: #fff; border: 70px solid #333; border-radius: 50%; position: absolute; bottom: 0; left: 50%; } .taiji:hover{ transform: rotate(360deg); } </style> </head> <body> <div class="taiji"></div> </body> </html>