123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- charset "utf-8";
- *{
- margin: 0;
- padding: 0;
- -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
- -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
- -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
- -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
- -ms-user-select: none;
- -moz-user-select: none;
- }
- body{
- background: url(../img/bg.png) 0px top no-repeat;
- background-position-x: 0px;
- overflow: hidden;
- font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "????", Arial, sans-serif;
- height: 1000px;
- transition:1s;
- background-color:#80b7b4;
- }
- .shouji{position:absolute; left:0%; top:0%; width:310%; height:100%;}
- .shouji .img{width:100%; height:100%;}
- #main{
- position: fixed;
- top: 60%;
- left: 0;
- height: 40%;
- width: 100%;
- overflow: visible;
- }
- .point{
- position:absolute;
- font-size: 24px;
- color: #ffffff;
- font-weight: bold;
- background-color: rgba(0,0,0,0.3);
- top:10%;
- height:40px; line-height:40px;
- text-align: center;
- width:100%;
- border-radius: 10px;
- }
- .tips{
- top:25%;
- position:absolute;
- width:100%;
- font-size: 14px;
- text-align: center;
- color: #000000;
- font-weight: bold;
- }
- #main .wall{
- position: absolute;
- top: 30%;
- height: 70%;
- width: 20%;
- background-color: #000000;
- }
- #main .stick{
- position:absolute;
- bottom: 68%;
- left: 20%;
- height: 2%;
- width: 0;
- background-color: #000000;
- transform: rotate(-90deg);
- }
- .stickMan{
- width: 100%;
- position: absolute;
- bottom: 66.5%;
- left: 15.5%;
- }
- .stickMan img{
- transform:scale(1);
- }
- .gameOver{
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height:100%;
- background-color: rgba(0,0,0,0.3);
- text-align: center;
- display: none;
- }
- .gameOver h2{
- margin: 15% 0 5% 0;
- font-size: 50px;
- color: #ffffff;
- font-weight: normal;
- }
- .gameOver .showPoint{
- width: 70%;
- background-color: #ffffff;
- padding: 2%;
- margin: 0 auto;
- border-radius: 10px;
- color: #000000;
- font-weight: bold;
- }
- .gameOver .showPoint .newPoint,.bestPoint{
- font-size: 30px;
- }
- .gameOver .btn{
- width: 30%;
- margin: 5% auto;
- padding: 3% 0;
- background-color: orange;
- color: #FFFFFF;
- font-weight: bold;
- border-radius: 5px;
- }
- #mask{
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999;
- background-color: rgba(0,0,0,0.5);
- }
- #mask img{
- position: absolute;
- top: 0;
- right: 20px;
- }
|