DIV+CSS 太极八卦
<p>太极页面</p>
<style><!--
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #eeeeee;
}
#八卦 {
width: 400px;
height: 400px;
border-radius: 200px;
position: relative;
overflow: hidden;
animation: x 10s linear infinite;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 1);
}
#八卦>div:first-child {
width: 50%;
height: 100%;
position: absolute;
left: 0;
background-color: black;
}
#八卦>div:nth-child(2) {
width: 50%;
height: 100%;
position: absolute;
right: 0;
background-color: white;
}
#八卦>div:nth-child(3) {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
border-radius: 50%;
background-color: black;
}
#八卦>div:nth-child(4) {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
border-radius: 50%;
background-color: white;
}
#八卦>div:nth-child(5) {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 75px;
margin-left: -50px;
border-radius: 50%;
background-color: white;
}
#八卦>div:nth-child(6) {
width: 50px;
height: 50px;
position: absolute;
left: 50%;
bottom: 75px;
margin-left: -50px;
border-radius: 50%;
background-color: black;
}
#八卦-wrapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#八卦-描述 {
margin-top: 1em;
font-size: 3em;
}
--></style>
<div id="八卦-wrapper">
<div id="八卦"> </div>
</div>
