HTML代码
<div class="item">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="square"></div>
</div>
CSS代码
body{background-color: violet;}
.item{
margin: 80px auto;
width: 500px;height: 500px;
position: relative;
animation-name: jumpping;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.item .circle1{
width: 200px;height: 200px;
background-color: red;
border-radius: 50%;
position: absolute;left:50px;top: 50px;
}
.item .circle2{
width: 200px;height: 200px;
background-color: red;
border-radius: 50%;
position: absolute;left: 150px;top: 50px;
}
.item .square{
width: 180px;height: 180px;
background-color: red;
transform: rotate(45deg);
position: absolute;left:110px ;top: 124px;
}
@keyframes jumpping{
from{transform:scale(1)}
to{transform:scale(1.2)}
}