style樣式代碼:
<style>
body{
background-color: lightcyan;
width: 600px;height: 600px;
border-radius: 50%;
border: 1px solid gray;
animation:bagua 5s linear infinite;
}
@keyframes bagua{
100%{transform: rotate(720deg)}
}
#bagua {
margin-left: 200px;
width: 0px;
height:200px;
position:relative;
border-left:100px solid black;
border-right:100px solid white;
border-radius:50%;
}
#bagua:before,#bagua:after{
position:absolute;
content:"";
}
#bagua:before {
width:100px;height:100px;
top:0;left:-50px;
z-index:5;
background-color:white;border-radius:50%;
box-shadow:0 100px 0px black;
}
#bagua:after {
width:30px;height:30px;
top:35px;left:-30px;z-index:10;
background-color:black;border-radius:50%;
box-shadow:0 100px 0px white;
}
</style>
html代碼:
<div id="bagua"></div>