基本的空间移动
<style>
*{
margin: 0 auto;
}
.f{
width: 600px;
height: 600px;
border: 1px solid #000;
position: relative;
}
.z{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
animation: movel 5s linear 0.3s alternate forwards;
}
@keyframes movel {
0%{
top: 0;
left: 0;
}100%{
top: 500px;
left: 500px;
}
}
</style>
<div class="f">
<div class="z"></div>
</div>
效果如下
实现多步移动
只需要修改@keyframes中的内容
@keyframes movel {
0%{
top: 0;
left: 0;
}20%{
top: 0;
left: 500px;
}40%{
top: 500px;
left: 500px;
}80%{
top: 500px;
left: 0;
}100%{
top: 0;
left: 0;
}
效果如下
还可以进行旋转操作
@keyframes circle {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
通过加工可以实现太极动图
源码如下
<style>
*{
margin: 0px auto;
background-color: gainsboro;
}
.fu{
width: 500px;
height: 500px;
/* border: 1px solid black; */
position: relative;
/* background-color: gray; */
animation: circle 2s linear infinite;
}
.fu>div{
position: absolute;
}
.z1{
width: 250px;
height: 500px;
background-color: black;
border-radius: 250px 0px 0px 250px;
}
.z2{
width: 250px;
height: 500px;
background-color: white;
border-radius: 0px 250px 250px 0px;
left: 250px;
}
.z3{
width: 250px;
height: 250px;
background-color: white;
border-radius: 50%;
left: 125px;
z-index: 1;
}
.z4{
width: 250px;
height: 250px;
background-color: black;
border-radius: 50%;
left: 125px;
top: 250px;
z-index: 1;
}
.z5{
width: 80px;
height: 80px;
background-color: black;
border-radius: 50%;
left: 220px;
top: 85px;
z-index: 3;
}
.z6{
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
left: 220px;
top: 345px;
z-index: 3;
}
@keyframes circle {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
</style>
<body>
<div class="fu">
<div class="z1"></div>
<div class="z2"></div>
<div class="z3"></div>
<div class="z4"></div>
<div class="z5"></div>
<div class="z6"></div>
</div>
</body>