CSS3旋转的八卦样式图

CSS3绘制旋转八卦图

最新推荐文章于 2024-04-22 14:26:52 发布

转载最新推荐文章于 2024-04-22 14:26:52 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kulowreidyql/p/5693217.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>CSS3绘制旋转八卦样式</title>
<style>
.square{
width:400px;
height:400px;
position:relative;

transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);

animation:rotate infinite linear 5s;
margin:10% auto;
-webkit-animation:rotate infinite linear 5s;
margin:10% auto;
-moz-animation:rotate infinite linear 5s;
margin:10% auto;
}
.rect{
width:400px;
height:200px;
position:relative;
border:1px #d2d2d2 solid;
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%;
}
.rect1{
border-radius:200px 200px 0 0;
background:white;
}
.rect11{
bottom:-100px;
left:0;
background:black;
}
.rect12{
background:white;
}
.rect2{
border-radius:0 0 200px 200px;
background:black;
}
.rect21{
bottom:100px;
right:0;
background:white;
}
.rect22{
background:black;
}
@keyframes rotate{
from{
transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}to{
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}}
</style>
</head>

<body>

</body>
</html>

完成以后的效果就是这样的了：

转载于:https://www.cnblogs.com/kulowreidyql/p/5693217.html