整体：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极图</title>
<style>
body{background-color: yellowgreen;}
.d2{
height: 400px;
width: 200px;
background-color: black;
border-radius: 0px 200px 200px 0px;
margin-top: -400px;
margin-left: 200px;
}
.d1{
height: 400px;
width: 200px;
background-color: white;
border-radius: 200px 0px 0px 200px;
}
.d3{
height: 200px;
width: 100px;
background-color: white;
border-radius: 0px 100px 100px 0px;
margin-top: -400px;
margin-left: 199px;
}
.d4{
height: 200px;
width: 100px;
background-color: black;
border-radius: 100px 0px 0px 100px;
margin-top: 0px;
margin-left: 101px;
}
.d5{
height: 100px;
width: 100px;
background-color: black;
border-radius:50px;
margin-top: -350px;
margin-left: 150px;
}
.d6{
height: 100px;
width: 100px;
background-color: white;
border-radius: 50px;
margin-top:100px;
margin-left: 150px;
}
.d{
height: 400px;
width: 400px;
border-radius: 200px;
transform: rotate(0deg);
margin: 300px auto;
animation: myfrist 10s linear infinite;
}
@keyframes myfrist{
from{
transform: rotate(0deg);
}
to{
transform: rotate(36000deg);
}
}
/* 过渡.d:hover{
transform: rotate(36000deg);
transition:20s; */
/* deg角度 */
}
</style>
</head>
<body>
<div class="d">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
<div class="d6"></div>
</div>
</body>
</html>
919
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
