旋转太极案例
先点赞收藏再借鉴哦!!
html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/taiji.css">
<title>太极旋转</title>
</head>
<body>
<div class="box-taiji"></div>
</body>
</html>
css部分:
.box-taiji {
width:0;
height:400px;
position:relative;
margin:50px auto;
border-left:200px solid #000000;
border-right:200px solid #ffffff;
box-shadow:0 0 30px rgba(0,0,0,.5);
border-radius:400px;
animation:rotation 2.5s linear infinite;
-webkit-animation:rotation 2.5s linear infinite;
-moz-animation:rotation 2.5s linear infinite;
}
.box-taiji:before,.box-taiji:after {
position:absolute;
content:"";
display:block;}
.box-taiji:before {
width:200px;
height:200px;
top:0;
left:-100px;
z-index:1;
background-color:#ffffff;
border-radius:50%;
box-shadow:0 200px 0 #000000;
}
.box-taiji:after {
width:60px;
height:60px;
top:70px;
left:-30px;
z-index:2;
background-color:#000;
border-radius:50%;
box-shadow:0 200px 0 #fff;
}
@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);}
}
效果图展示: