HTML+CSS方块跳动
核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动
将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。
初学可以copy过去慢慢琢磨，我也是琢磨了好久才弄出来的！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方块跳动</title>
<style>
.box01{
width: 200px;
height: 200px;
/* background-color: teal; */
overflow: hidden;
animation: jump1 3s infinite ease-in-out;
}
.box11{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: tomato;
margin-top: 75px;
margin-left: 150px;
}
.box02{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 150px;
/* background-color: teal; */
overflow: hidden;
animation: jump2 3s infinite ease-in-out;
}
.box22{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: blue;
margin-top: 75px;
margin-left: 150px;
}
.box03{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 300px;
/* background-color: teal; */
overflow: hidden;
animation: jump3 3s infinite ease-in-out;
}
.box33{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: green;
margin-top: 75px;
margin-left: 150px;
}
.box04{
width: 200px;
height: 200px;
margin-top: -200px;
margin-left: 450px;
/* background-color: teal; */
overflow: hidden;
animation: jump4 3s infinite ease-in-out;
}
.box44{
width: 50px;
height: 50px;
border-radius: 20%;
background-color: skyblue;
margin-top: 75px;
margin-left: 150px;
}
.box0{
width: 50px;
height: 50px;
position: absolute;
top: 90px;
background-color: teal;
border-radius: 20%;
animation: su 1.5s linear alternate infinite;
}
@keyframes su {
to{
margin-left: 600px;
}
}
@keyframes jump1 {
from{
}
12.5%,87.5%{
transform:rotateZ(-180deg);
animation-delay: 2s;
}
to{
}
}
@keyframes jump2 {
12.5%{
transform: rotateZ(0deg);
}
25%{
transform: rotateZ(-180deg);
}
75%{
transform: rotateZ(-180deg);
}
87.5%{
transform: rotateZ(0deg);
}
}
@keyframes jump3 {
25%{
transform:rotateZ(0deg);
}
37.5%{
transform: rotateZ(-180deg);
}
62.5%{
transform: rotateZ(-180deg);
}
75%{
transform: rotateZ(-0deg);
}
}
@keyframes jump4 {
37.5%{
transform:rotateZ(0deg);
}
50%{
transform:rotateZ(-180deg);
}
62.5%{
transform:rotateZ(0deg);
}
}
</style>
</head>
<body>
<div class="box01">
<div class="box11"></div>
</div>
<div class="box02">
<div class="box22"></div>
</div>
<div class="box03">
<div class="box33"></div>
</div>
<div class="box04">
<div class="box44"></div>
</div>
<div class="box0"></div>
</body>
</html>