HTML之盒子变形动画

4个圆形球作圆周运动

代码：

 <div class="box">
         <div class="box1"></div>
         <div class="box2"></div>
         <div class="box3"></div>
         <div class="box4"></div>
     </div>

*{
    margin: 0;
    padding: 0;
}
body{
    margin: auto;
    padding-top: 200px;
    padding-left: 600px;
}
.box{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background-color: blue;
    position: relative;
}
.box div{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: red;
}
.box1{
    position: absolute;
    left: 100px;
    top: -200px;
    animation-name: div1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.box2{
    position: absolute;
    left: -200px;
    top: 100px;
    animation-name: div2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.box3{
    position: absolute;
    left: 100px;
    bottom: -200px;
    animation-name: div3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.box4{
    position: absolute;
    top: 100px;
    left: 400px;
    animation-name: div4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes div1{
    from{transform:translate(0,0)}
    50%{transform:translate(150,150)}
    to{transform: translate(300px,300px)};
}
@keyframes div2{
    from{transform: translate(0,0)}
    50%{transform: translate(150,-150px)}
    to{transform: translate(300px,-300px)}
}
@keyframes div3{
    form{transform: translate(0,0)}
    50%{transform: translate(-150px,-150px)}
    to{transform: translate(-300px,-300px)}
}
@keyframes div4{
    from{transform: translate(0,0)}
    50%{transform: translate(-150px,150px)}
    to{transform: translate(-300px,300px)}
}

完成图形：