web前端 打地鼠小游戏

 <style>
    html,body{
   
        height: 100%;
    }
    body{
   
        margin: 0;
        overflow: hidden;
        background-image: url(image/bg.jpg);
        /* 用户不能选择内容 */
        user-select: none;
        /* 火狐浏览器的私有属性 */
        -moz-user-select: none;
        /* 谷歌和safaif浏览器的私有属性 */
        -webkit-user-select: none;
        /* ie 浏览器 */
        -ms-user-select: none;
        /* 设置鼠标样式 如果自定义图片必须加auto */
        cursor: url(image/cursor.png),auto;
    }
    p{
   
        background-color: red;
        position: absolute;
        top: 30px;
        border-radius: 0px 5px 5px 0px;
        font-size: 20px;
        font-weight: bold;
        font-family: 楷体;
        color: white;
        left: 30px;
        padding: 10px;
    }
    table{
   
        border: 1px solid black;
        width: 600px;
        height: 600px;
        margin: 40px auto;
        border-collapse: collapse;
    }
    td{
   
        width: 150px;
        height: 150px;
        border: 1px solid red;
        /* 合并边框 */
        background-image: url(image/hole.png);
        background-repeat: no-repeat;
        background-size: 120px 60px;
        background-position: center bottom;
        text-align: center;
        /* 数值对齐方式 */
        vertical-align: bottom;
    }
    td>img{
   
        width: 80px;
        height: 0px;
        position: relative;
        top: -10px;
    }
    /* 使用老师上去的动画效果 以后再js对一个元素对象添加这个up类，这个元素对象就是这个类的效果 */
    .up{
   
        animation: mouseUp 0.3s linear forwards;
    }
    .down{
   
        animation: mouseDown 0.3s linear forwards;
    }
    /* 地鼠上升和地鼠下去  添加两个动画效果 上去的动画效果：height 从0到70 
    下去的动画效果：height 从70到0