如何用CSS纯代码画一个旋转的太极图
导读：HTML部分： CSS部分： .square{ width:400px; height:400px; position...
HTML部分：
CSS部分：
.square{
width:400px;
height:400px;
position:relative;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
animation:rotateinfinitelinear5s;
margin:10%auto;
-webkit-animation:rotateinfinitelinear5s;
margin:10%auto;
-moz-animation:rotateinfinitelinear5s;
margin:10%auto;
}
.rect{
width:400px;
height:200px;
position:relative;
border:1px#d2d2d2solid;
border-bottom:none;
}
.inner_circle{
width:200px;
height:200px;
border-radius:200px;
position:absolute;
z-index:1;
}
.dot{
width:50px;
height:50px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border-radius:50%;
}
.rect_one{
border-radius:200px200px00;
background:white;
}
.rect_one_one{
bottom:-100px;
left:0;
background:black;
}
.rect_one_two{
background:white;
}
.rect_two{
border-radius:00200px200px;
background:black;
}
.rect_two_one{
bottom:100px;
right:0;
background:white;
}
.rect_two_two{
background:black;
}
@keyframesrotate{
from{
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
to{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何用CSS纯代码画一个旋转的太极图
本文地址： https://pptw.com/jishu/664632.html