CSS动画:太极
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>太极</title>
<link rel="stylesheet" type="text/css" href="css/TaiChi.css"/>
</head>
<body>
<div class="taichi">
<div class="white"></div>
<div class="black"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
html,body{
box-sizing: border-box;
width:100%;
height: 100vh;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
display: flex;
}
.taichi{
width:350px;
height: 350px;
border: 2px solid black;
border-radius: 50%;
background: linear-gradient(to top, black 50%, white 50%);/*将背景色设置成两个不同的颜色*/
position: absolute;
animation: go 2s linear infinite;/*盒子旋转*/
}
.taichi:hover{
animation-play-state: paused;/*暂停动画*/
}
@keyframes go{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.taichi>.white{
width: 175px;
height: 175px;
border-radius: 50%;
background: white;
position: relative;
top:25%;
left: 0;
float: left;
}
.taichi>.black{
width: 175px;
height: 175px;
border-radius: 50%;
background: black;
position: relative;
top:25%;
left: 0;
float: left;
}
.taichi>*:after{
content: " ";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
transform: translate(-50%);
position: relative;
top:50%;
left: 50%;
}
.taichi>.white:after{
background: black;
}
.taichi>.black:after{
background: white;
}