HTML和css动画实现贪吃豆

效果图如下：

布局如下：

        <div class="top"></div>
        <div class="bottom"></div>
        
        <div class="bean bean1"></div>
        <div class="bean bean2"></div>
        <div class="bean bean3"></div>
        <div class="bean bean4"></div>
    </div>

样式如下：
.box{
margin: 100px auto 0;
width: 500px;
height: 300px;
transform-style: preserve-3d;
background-color: #008000;
}
.top{
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
/* border: 1px solid #0F0FFF; /
/ transform: rotateZ(-45px); */
animation: roll1 1s infinite;
background-color: #fff;

        }
        .bottom{
            width: 200px;
            height: 100px;
            border-radius: 0 0 100px 100px;
            /* border: 1px solid #0F0FFF; */
            animation: roll2 1s infinite;
            background-color: #fff;
        }
        @keyframes roll1{
            from{
               transform:  rotate(-45deg); 
                }
                50%{
                  transform:rotate(0deg);
                }
            to{
                                   transform:rotate(-45deg);                     
            }
        }
        @keyframes roll2{
            from{
                transform:rotate(45deg); 
                }
                50%{
                  transform:rotate(0deg);
                }
            to{
                transform:rotate(45deg);
            }
        }
    
        .bean{
            position: absolute;
            right: 0;
            top: 100px;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background-color: #fff;
        }
    
        .bean1{
            animation:bean 2s  0s infinite linear;
        }
        .bean2{
            animation: bean 2s 0.5s infinite linear;
        }
        .bean3{
            animation: bean 2s 1s infinite;
        }
        .bean4{
            animation: bean 2s 1.5s infinite;
        }
       
        
        @keyframes bean{
            from{
                /* transform: translateX(0); */
                opacity: 1;
            }
            50%{
                /* transform: translateX(-200px); */
                opacity: 0.1;
            }
            to{
                transform: translateX(-500px);
                opacity: 0;
            }
        }