CSS3制作太极图
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid black;
margin: 80px auto 0;
border-radius: 50%;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
position: relative;
animation: mymove 2s linear infinite;
}
.box:before{
content: "";
width: 200px;
height: 400px;
background-color: black;
position: absolute;
top: 0;
left: 0;
border-top-left-radius: 200px;
border-bottom-left-radius: 200px;
}
.box:after{
content: "";
width: 200px;
height: 400px;
background-color: white;
position: absolute;
top: 0;
left: 200px;
border-top-right-radius: 200px;
border-bottom-right-radius: 200px;
}
.circle1{
width: 200px;
height: 200px;
background-color: black;
border-radius: 300px;
position: absolute;
top: 0;
left: 100px;
z-index: 2;
}
.circle2{
width: 200px;
height: 200px;
background-color: white;
border-radius: 300px;
position: absolute;
top: 200px;
left: 100px;
z-index: 2;
}
.circle1:after{
content: "";
width: 75px;
height: 75px;
background-color: white;
border-radius: 75px;
position: absolute;
top: 60px;
left: 55px;
z-index: 3;
}
.circle2:after{
content: "";
width: 75px;
height: 75px;
background-color: black;
border-radius: 75px;
position: absolute;
top: 60px;
left: 55px;
z-index: 3;
}
@keyframes mymove{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
</body>
在盒子里面绘制上下两个小圆，这两个小圆的特点，都是绝对定位在外层盒子上的某个点上。
利用伪类before绘制 两个圆，将这两个对象定位在 外层盒子的某个点上。
扫一扫
1892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
