首页 > 代码库 > 超厉害的旋转的太极源码
超厉害的旋转的太极源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 420px;
height: 420px;
/*background-color: gray;*/
margin: 0 auto;
position: relative;
}
#small{
/*width: 30px;
height: 30px;*/
/*border: 1px solid #000;*/
/*width: 200px;*/
box-shadow: 10px 10px 20px #222;
height: 0;
border-top-width: 210px;
border-top-color: black;
border-bottom-width: 210px;
border-bottom-color: white;
border-left-width: 0;
border-right-width: 0;
border-style: solid;
border-radius: 210px;
position: relative;
top: 40px;
}
#small:before{
content: "";
height: 70px;
width: 70px;
border: 70px solid black;
border-radius: 140px;
background-color: white;
border-style: solid;
position: absolute;
top: -100px;
}
#small:after{
content: "";
height: 70px;
width: 70px;
border: 70px solid white;
border-radius: 140px;
background-color: black;
border-style: solid;
position: absolute;
top: -100px;
right: 0px;
}
#small{
animation: quanquan 15s linear infinite;
}
@keyframes quanquan{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="box">
<div id="small" class="box">
</div>
</div>
</body>
</html>
手机QQ扫一扫加web前端学习部落22群，群文件分享，技术交流
海量前端学习资料库，请添加群120342833
超厉害的旋转的太极源码