太极图

最新推荐文章于 2021-06-29 01:31:51 发布

原创最新推荐文章于 2021-06-29 01:31:51 发布 · 289 阅读

CC 4.0 BY-SA版权

HTML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>太极图（动画）</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="box">

<div class="universe"></div>
</div>

</body>
</html>

CSS

*{
margin: 0;
padding: 0;
}
.box{
background: -moz-linear-gradient(top, green, orange);
background: -webkit-gradient(linear, left top, left bottom, from(green), to(orange));
-webkit-box-shadow:0px 5px 5px #c8c8c8 inset;
-moz-box-shadow:0px 3px 3px #c8c8c8 inset;
width:500px;
height:500px;
border:2px solid #fff;
margin:30px auto;
background-color:rgb(102, 153, 204);
box-sizing:border-box;
border-radius: 10px;
box-shadow:5px 5px 5px orange,5px -5px 5px red,-5px 5px 5px green,-5px -5px 5px yellow;
}
/*一黑一白两个半圆*/
.universe{
width: 0;
height: 400px;
position: relative;
margin-top: 50px auto;
border-left: 200px solid #000;
border-right: 200px solid #fff;
box-shadow: 0 0 30px rgba(0,0,0,.5);
border-radius: 400px;
}
/*在这基础上加一个为after伪类一个白色圆形，定好位置*/
.universe:after{
width: 200px;
height: 200px;
position: absolute;
content: "";
display: block;
top: 0;
left: -100px;
z-index: 1;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 200px 0 #000;
}
/*同上面的原理一样在实现两个圆形，定好位置，太极图就实现了*/
.universe:after{
width: 60px;
height: 60px;
top: 70px;
left: -30px;
z-index: 2;
background-color: #000;
border-radius: 50%;
box-shadow: 0 200px 0 #fff;
}
.universe{
width: 0;
height: 400px;
position: relative;
margin: 50px auto;
border-left: 200px solid #000;
border-right: 200px solid #fff;
box-shadow: 0 0 30px rgba(0,0,0,.5);
border-radius: 400px;
animation: rotation 2.5s linear infinite;
-moz-animation: rotation 2.5s linear infinite;
-webkit-animation: rotation 2.5s linear infinite;
}
.universe:before,.universe:after{
position: absolute;
content: "";
display: block;
}
.universe:before{
width: 200px;
height: 200px;
content: "";
display: block;
top: 0;
left: -100px;
z-index: 1;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 200px 0 #000;
}
.universe:after{
width: 60px;
height: 60px;
top: 70px;
left: -30px;
z-index: 2;
background-color: #000;
border-radius: 50%;
box-shadow: 0 200px 0 #fff;
}
/*然后添加一个css3动画*/
@keyframes rotation {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes rotation {
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0%{
-moz-transform: rotate(0deg);
}
100%{
-moz-transform: rotate(360deg);
}
}