转动的太极纯HTML代码Web基础篇
HTML-03转动的太极图
<style>
.box{
width:400px;
html代码转链接height:400px;
background-color:gray;
margin:100px auto 0 auto;
border-radius:50%;
position:relative;
animation:rotate 3s linear infinite;
}
@keyframes rotate{
0%{
transform:rotate(0deg);
}100%{
transform:rotate(360deg);
}
}
.square{
width:200px;
height:400px;
position:absolute;
top:0;
}
.
squareWhite{
background-color:white;
left:0;
border-radius:200px 0 0 200px;
}
.squareBlack{
background-color:black;
right:0;
border-radius:0 200px 200px 0;
}
}
.
circle{
width:200px;
height:200px;
border-radius:50%;
position:absolute;
left:100px;
}
.circleWhite{
background-color:white;
top:0;
}
.
circleBlack{
background-color:black;
bottom:0;
}
.dot{
width:30px;
height:30px;
background-color:black;
border-radius:50%;
position:absolute;
top:85px;
left:85px;
}
.dotWhite{
background-color:white;/*后定义的样式会把先定义的覆盖*/ }
</style>
</head>
<body>
<div class="box">
<!-- ⼀个标签可以定义多个类名 -->
<div class="square squareWhite"></div>
<div class="square squareBlack"></div>
<div class="circle circleWhite">
<div class="dot"></div>
</div>
<div class="circle circleBlack">
<div class="dot dotWhite"></div>
</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。