仔细分析分析这个游戏,其实最难的就是地鼠和绿色油漆桶的绘制了,绿色油漆桶看上去还简单些,那就先来解决它吧:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="hole"></div> </div> </body>check the result
css:
.container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; } .hole { position : absolute; left : 30px; top : 70px; width : 68px; height : 100px; background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); border-left : 1px solid #236d22; box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6); } .hole:before { display : block; content : ''; position : absolute; width : 84px; height : 24px; margin-left : -8px; top : -24px; background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); }
基本上都是我们学过的,只是background-image的linear用了百分比,来指定在某个百分比的地方的颜色,从而实现更精确的渐变控制。注意,在这里-webkit-linear-gradient是left,而linear-gradient是to right,其他方向也是类似。而在before中,background-image用了3个渐变叠加,这也是多重背景的应用。Linear中,可以指定百分比,也可以指定像素,这里用像素实现了before顶部和底部的高光效果。
然后就是地鼠的绘制了,来看看:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="susliks"></div> </div> </body>check the result
css:
.container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; } .susliks { position : absolute; left : 30px; top : 70px; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%), -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%); background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%); } .susliks:before, .susliks:after { content : ''; left : -5px; top : -5px; width : 20px; height : 20px; position : absolute; background : #e3c498; border-radius : 50%; background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%); background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%); } .susliks:after { left : auto; right : -5px; }
地鼠的绘制利用了多重背景的特性,主体给一个border-radius,然后就利用多重背景来绘制眼睛和鼻子了。每一个圆圈都是一个径向渐变,径向渐变的第一个参数,之前我们用的是类似top这种,这里我们精确指定像素,第三个参数和第四个参数,我们也指定渐变半径的大小,这里用的是百分比,半径之内的绘制颜色,半径之外的透明,这样就完成了圆圈的绘制。两个耳朵的绘制就用before和after就行啦,手段都是一样的。
好了,让我们来画一下三个场景吧!
先来看看第一个场景,是游戏开始时的场景:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <h1>打呀打地鼠</h1> <p>不许笑,一个严肃的 CSS 游戏</p> <div class="btn-group"> <div class="susliks"></div> <div class="start">开始</div> </div> </div> </body>check the result
css:
* { padding : 0px; margin : 0px; box-sizing: border-box; } .container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; background-color : black; } .susliks { position : relative; left : 0px; top : 6px; margin : 0px auto; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%), -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%); background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%); } .susliks:before, .susliks:after { content : ''; left : -5px; top : -5px; width : 20px; height : 20px; position : absolute; background : #e3c498; border-radius : 50%; background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%); background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%); } .susliks:after { left : auto; right : -5px; } h1, p { color: #fff; text-align: center; } h1 { line-height: 50px; } .btn-group { margin: 80px auto; width: 100px; height: 90px; overflow: hidden; position: relative; } .start { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: #51a70d; color: #fff; text-align: center; line-height: 40px; cursor: pointer; border-bottom: 4px solid #62b210; border-radius: 4px; }
其他的样式对我们来说应该很简单,这里主要注意两点。第一、我们把.susliks的position由absolute改为了relative,因为relative可以用margin: 0px auto来左右居中,而absolute不行,原因也很简单,relative的元素还是占有原来的位置,所以设置margin还是能生效,而absolute则完全没有原来的位置了,故设置margin也就不生效啦。第二、box-sizing,我们设置了border-box,和普通的盒子模型有什么不同呢?普通盒子模型设置width和height,是不会包含border的,所以我们还要另算border,有时候很麻烦,所以我们可以设置box-sizing: border-box;,这样的话width和height就把border包含进去了。
第二个场景的话还有一个麻烦事儿,那就是绿色的深浅相交的草地,
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="time-wrapper"> <p>游戏时间:</p> <div class="time"> <div class="progress"></div> </div> </div> <div class="mapGroup"> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> <div class="map"></div> </div> <div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> <div class="group"> <div class="susliks"></div> <div class="hole"></div> </div> </div> <div class="points"> <div class="point">0</div> </div> </div> </body>check the result
css:
* { padding : 0px; margin : 0px; box-sizing: border-box; } .container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; background: -webkit-linear-gradient(top, #8adcf7 0%, #bbe8fd 100%); background: linear-gradient(to bottom, #8adcf7 0%, #bbe8fd 100%); } .susliks { position : relative; left : 0px; top : 6px; margin : 0px auto; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%), -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%); background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%); } .susliks:before, .susliks:after { content : ''; left : -5px; top : -5px; width : 20px; height : 20px; position : absolute; background : #e3c498; border-radius : 50%; background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%); background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%); } .susliks:after { left : auto; right : -5px; } .hole { position : absolute; left : 0px; top : 70px; width : 68px; height : 100px; background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); border-left : 1px solid #236d22; box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6); } .hole:before { display : block; content : ''; position : absolute; width : 84px; height : 24px; margin-left : -8px; top : -24px; background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ), linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px, rgba(255, 255, 255, 0) 6px ), linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%); } .time-wrapper { position: absolute; left: 20px; top: 20px; } .time-wrapper p { color: #fff; line-height: 24px; } .time { border: 2px solid #fff; width: 140px; height: 20px; } .time .progress { height: 16px; width: 0; } .mapGroup { position: absolute; bottom: 0; left: -600px; width: 1800px; height: 800px; -webkit-transform: perspective(600px) rotateX(45deg); transform: perspective(600px) rotateX(45deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .map { width: 5%; height: 100%; float: left; } .map:nth-child(2n) { background: #62b210; } .map:nth-child(2n+1) { background: #51a70d; } .group { position: absolute; width : 68px; } .group:nth-child(1) { left: 45px; top: 210px; } .group:nth-child(2) { left: 165px; top: 270px; } .group:nth-child(3) { left: 345px; top: 250px; } .group:nth-child(4) { left: 80px; top: 370px; } .group:nth-child(5) { left: 400px; top: 410px; } .group:nth-child(6) { left: 470px; top: 230px; } .points { position: absolute; top: 20px; left: 50%; width: 100px; height: 48px; margin-left: -50px; background: rgba(0, 0, 0, 0.2); border: 4px solid #ffffff; border-radius: 4px; color: #fff; } .point { display: block; height: 40px; text-align: center; font-size: 30px; font-weight: bold; cursor: default; }
其实草地的效果很明显是用了3D转换,就是一个div绕x轴旋转了45度,而深浅相交的div正是用了nth-child选择器。其实技术说破了都很简单,但是在一开始能够想到还是不简单的。其他的东西对我们来说应该很简单了,就是用绝对定位来放好位置就行。注意,这里使用了3D转换,360和ie请注意测试,在我这里360是没有效果的。
第三个场景和第一个场景类似,都不是很麻烦:
html:
<!DOCTYPE html> <head> <meta charset="utf-8" /> <title>打地鼠</title> <link href="style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="end"> <h2>Game Over</h2> <p>壮士欢迎从头再来</p> <p class="meta">按 F5/Command R 重来</p> <div class="susliks"></div> </div> </div> </body>check the result
css:
* { padding : 0px; margin : 0px; box-sizing: border-box; } .container { position : absolute; left : 50%; top : 50%; width : 600px; height : 600px; margin-left : -300px; margin-top : -300px; border : 1px solid black; overflow : hidden; background-color : black; } .susliks { position : absolute; left : 50%; bottom: -54px; margin-left: -28px; width : 56px; height : 100px; border-radius : 20px; background : #e3c498; background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%), -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%), -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%), -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%); background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%), radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%), radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%), radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%); } .susliks:before, .susliks:after { content : ''; left : -5px; top : -5px; width : 20px; height : 20px; position : absolute; background : #e3c498; border-radius : 50%; background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%); background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%); } .susliks:after { left : auto; right : -5px; } h2, p { color: #fff; text-align: center; } h2 { margin-top: 100px; margin-bottom: 10px; } .meta { margin-top: 50px; opacity: 0.6; } .end { top: -800px; opacity: 1; display: block; border-bottom: 2px solid #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
用绝对定位把地鼠调整到合适的位置就好了。
样式都做好了,但是实在是不知道怎么响应鼠标的点击事件啊,明天去请教下欣欣好了!