css3制作太极图
2019年09月12日
961
css3制作太极图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3制作太极图</title>
<style type="text/css">
#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;
}
#box:before{
content:"";
width:200px;
height:400px;
background-color: green;
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: pink;
position: absolute;
top:0;
left:200px;
border-top-right-radius:200px;
border-bottom-right-radius:200px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
将最外层盒子 圆角边框半径 border-radius:50%; 的注释去掉。
将伪类before背景设置为黑色
background-color: black;
将伪类after背景设置了白色
background-color: white;
预览效果如下所示：
在盒子里面绘制上下两个小圆，这两个小圆的特点，都是绝对定位在外层盒子上的某个点上。代码如下：
.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;
right: 100px;
z-index:2;
}效果如下：
利用伪类after绘制 两个 宽度75px 高度75px的 圆，将这两个对象定位在 外层盒子的某个点上。代码入下所示：
.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;
bottom: 60px;
right: 55px;
z-index:3;
}效果如下所示：
给外层盒子添加动画：
/*动画*/
animation: mymove 2s linear infinite;
给太极图做旋转效果，360度旋转：
@keyframes mymove{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}@-webkit-keyframes mymove{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@-moz-keyframes mymove{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@-o-keyframes mymove{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
效果如图所示：
