太極圖繪製 ~~~javascript TaiChi ~~~ ...
太極圖繪製
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TaiChi</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body {
background-color:skyblue;
}
div{
width:200px;
height:400px;
background-color:#fff;
border-left:200px solid #000000;
margin:50px auto;
border-radius:50%;
transition:all .6s ease-in-out;
}
div::before,div::after{
content:"";
display:block;
width:50px;
height:50px;
border-radius:50%;
margin-left:-100px;
}
div::before{
background:#fff;
border:75px solid #000000;
}
div::after{
background:#000;
border:75px solid #fff;
}
div:hover{
transform:rotate(360deg);
}
</style>
<body>
<div class="123">
</div>
</body>
</html>
