web前端写旋转的先天八卦图
时间: 2023-05-30 07:02:22 浏览: 101
以下是一个简单的HTML/CSS实现八卦图旋转的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转的八卦图</title>
<style>
.container {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
animation: rotate 6s linear infinite;
}
.yin {
width: 100%;
height: 50%;
background-color: black;
border-radius: 50% 50% 0 0;
}
.yang {
width: 100%;
height: 50%;
background-color: white;
border-radius: 0 0 50% 50%;
}
.circle {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: white;
border: 6px solid black;
position: absolute;
top: 70px;
left: 70px;
}
.circle::before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 15px;
left: 15px;
}
.circle::after {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 15px;
right: 15px;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="yin"></div>
<div class="yang"></div>
<div class="circle"></div>
</div>
</body>
</html>
```
其中,使用了CSS3的动画效果(`animation`),将旋转动画应用于包含八卦图的容器(`.container`)中。八卦图由阴阳两部分(`.yin`和`.yang`)组成,中间的圆圈(`.circle`)则使用伪元素(`::before`和`::after`)来绘制。通过设置元素的圆角属性(`border-radius`),可以实现阴阳两部分的半圆形状。旋转动画的实现则使用了CSS3的`transform`属性,结合`@keyframes`规则来定义动画的关键帧。