旋转八卦图代码html
时间: 2023-10-22 11:05:01 浏览: 57
以下是旋转八卦图的 HTML 代码:
```html
<div class="container">
<div class="yin-yang">
<div class="yin"></div>
<div class="yang"></div>
</div>
</div>
```
你可以将这段代码复制粘贴到你的 HTML 文件中,并在浏览器中查看效果。
相关问题
web前端写旋转的先天八卦图
以下是一个简单的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`规则来定义动画的关键帧。
用HTML+css实现太极八卦图
好的,以下是一个用HTML和CSS实现太极八卦图的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极八卦图</title>
<style>
#taiji {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(90deg, #000000, #ffffff, #000000);
position: relative;
transform: rotate(45deg);
}
#taiji:before {
content: '';
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ffffff;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
}
#taiji:after {
content: '';
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000000;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}
#taiji .yin {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffffff;
position: absolute;
top: 25px;
left: 50%;
margin-left: -25px;
}
#taiji .yang {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000000;
position: absolute;
bottom: 25px;
left: 50%;
margin-left: -25px;
}
#taiji .left {
width: 50px;
height: 50px;
border-radius: 50% 0 0 50%;
background-color: #000000;
position: absolute;
top: 75px;
left: 0;
}
#taiji .right {
width: 50px;
height: 50px;
border-radius: 0 50% 50% 0;
background-color: #ffffff;
position: absolute;
top: 75px;
right: 0;
}
#taiji .left:before {
content: '';
display: block;
width: 25px;
height: 50px;
background-color: #ffffff;
position: absolute;
top: 0;
left: 0;
}
#taiji .right:before {
content: '';
display: block;
width: 25px;
height: 50px;
background-color: #000000;
position: absolute;
top: 0;
right: 0;
}
#taiji .left:after {
content: '';
display: block;
width: 50px;
height: 50px;
background-color: #000000;
position: absolute;
top: 0;
left: 25px;
border-radius: 50%;
transform: rotate(45deg);
}
#taiji .right:after {
content: '';
display: block;
width: 50px;
height: 50px;
background-color: #ffffff;
position: absolute;
top: 0;
right: 25px;
border-radius: 50%;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="taiji">
<div class="yin"></div>
<div class="yang"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
```
这段代码会生成一个200*200大小的太极八卦图,使用了CSS3的渐变、旋转、倾斜等属性来实现。同时,八卦图内部的阴、阳两极和四个小半圆也使用了CSS来绘制。