html变色弹球,使用html+css+js实现弹球游戏(示例代码)

.panel{position:relative;z-index:0;top:0px;left:400px;width:300px;height:500px;

}.console{position:absolute;z-index:1;top:0;left:0;width:100%;height:40px;background-color:#bbb;

}.message{position:absolute;z-index:1;top:40px;left:0;width:100%;height:460px;color:white;font-size:50px;text-align:center;line-height:460px;background-color:#999;

}.start,.score,.pause{position:absolute;z-index:2;top:0;width:100px;height:100%;font-size:large;color:white;text-align:center;line-height:40px;background:-webkit-linear-gradient(top,#4ca8ff,yellow);

}.start{left:0px;

}.score{left:100px;background-color:red;

}.pause{left:200px;

}.start:after,.pause:before{content:"";position:absolute;z-index:2;top:0;width:3px;height:100%;background:-webkit-linear-gradient(top,#666,#999);

}.start:after{left:97px;

}.pause:before{left:0px;

}.start:hover,.pause:hover{cursor:pointer;background:-webkit-linear-gradient(top,#4ca8ff,red);

}.panel span{position:absolute;z-index:0;top:50%;left:50%;font-size:50px;color:blue;

}.ball,.secondBall{position:absolute;z-index:2;border-radius:50%;width:20px;height:20px;

}.ball{top:460px;left:140px;background-color:red;

}.secondBall{top:40px;left:140px;background-color:red;

}.plate{position:absolute;top:480px;left:100px;z-index:2;width:100px;height:20px;background-color:#e5e5e5;

}.promte{margin-top:20px;text-align:center;

}

开始