（10）HTML5-CSS网页小游戏

游戏的组成有如下：

初始画面：初始画面的布局包括背景，计分栏，地鼠和计时条。

计分系统：若打到地鼠，计分栏的分数会加一，最低0，最高十分。

计时系统：游戏时间计时10秒，计时条会显示游戏进行的进度。

地鼠系统：总共有5个洞，一个洞最多出现两只地鼠，共十只地鼠。

特效系统：地鼠被打击到会出现“碰”字样的特效。

动画系统：地鼠AI，时间条变化，分数更新。

图片资源下载链接

CSS文件：

/* *代表所有的标签都继承这一属性*/
*{
    /*
    边界设置为0
    留白设置为0
    文字大小设置为12像素
    文字行高1.2像素
     */
    margin:0;
    padding:0;
    font-size:12px;
    line-height:1.2px;
}

html{
    /*设置黑色背景*/
    background:#000;
}

body{
    /*
    宽度设置为465像素
    高度设置为465像素
    控制卷轴设为隐藏
     */
    width:465px;
    height:465px;
    overflow:hidden;
}
/*游戏背景*/
#game{
    /*   
        position:排版设为相对位置
        background-position:背景位置（x，y）都是设为0，0
        background-repeat:背景不重复
    */
    position:relative;
    width:319px;
    height:375px;
    overflow:hidden;
    margin:40px auto 0;
    background-position:0px 0px;
    background-repeat:no-repeat;
}
/*鼠标设置*/
*{
    -webkit-user-select:none;
    -moz-user-select:none;
}


/* 游戏结束背景 */
#gameover{
    /*
    position位置设为绝对位置
    top上0px
    left左0px
    background背景的rgba（r，g，b，a）都设为0，0，0，0.5（半透明）
    -webkit-animation-name动画名为gameover
    -webkit-animation-timing-function动画特效为linear线性
    -webkit-animation-duration动画播放所需要的时间设为13s
    -webkit-animation-delay动画播放延迟0.5s
    z-index z轴图层设为20
    opacity透明度设为1不透明
     */
    position:absolute;
    top:0;
    left:0;
    width:319px;
    height:375px;
    background:rgba(0,0,0,0.5);
    -webkit-animation-name:gameover;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:13s;
    -webkit-animation-delay:0.5s;
    z-index:20;
    background-position:0px 0px;
    background-repeat:no-repeat;
    opacity:1;
}

/* 动画 游戏结束画面 */
@-webkit-keyframes gameover{
    /*
    %数为动画的时间轴长度百分比
    */
    0%{top:-465px;opacity:1;}
    97%{top:-465px;opacity:0;}
    100%{top:0px;opacity:1;}
}

/* 时间条背景 */
#timer{
    position:absolute;
    top:310px;
    left:5px;
    z-index:10;
    width:309px;
    height:50px;
    background-position:0px 0px;
    background-repeat:no-repeat;
}

/* 时间条 */
#progress{
    position:absolute;
    top:7px;
    left:114px;
    width:170px;
    height:36px;
    background-position:0px 0px;
    background-repeat:repeat-x;
    -webkit-animation-name:progress;
    -webkit-animation-timing-function:linear;
    -webkit-animation-duration:12.5s;
    -webkit-animation-delay:0.5s;
}

/* 动画 时间条 */
@-webkit-keyframes progress{
    /*
    照着12.5秒时间变长
    */
    0%{width:0px;}
    100%{width:170px;}
}

/*土拔鼠 显示区域*/
#enemy{
    position:absolute;
    top:150px;
    left:0;
    width:319px;
    height:100px;
    overflow:hidden;
}

/*绘制土拔鼠*/
.