main.css 5.4 KB

1
  1. body{overflow:hidden;background-color:#000;font-family:"微软雅黑"}*{padding:0;margin:0}.area{overflow:hidden;background-color:#e6e2f4;position:fixed;height:100%;width:100%;margin:auto;left:0;top:0;right:0;bottom:0}.bird{display:none;position:absolute;left:0;top:0;border-radius:5px;-webkit-transform:translate3d(0,0,0);z-index:4}.hide{display:none}#canvas{position:fixed;left:0;top:0}#debug{position:absolute;left:0;top:0}.state{position:absolute;width:100%;height:100%;top:0;left:0}#over{z-index:5;display:none;-webkit-transform:translate3d(0,0,0)}#over div.over-ground{text-align:center;position:absolute;width:70%;height:65%;margin:auto;top:0;left:0;bottom:0;right:0}#over div.over-ground div.border{-webkit-border-radius:10px;background-color:#f82e4f;color:#fff;margin:10px 0}#over div.over-ground div.title{opacity:0;font-weight:700;height:85px;line-height:85px;-webkit-animation-name:overFadeAnimation;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:0s;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-fill-mode:forwards}#over div.over-ground div.title p.score{font-size:50px}#over div.over-ground div.remark{opacity:0;height:80px;line-height:40px;-webkit-animation-name:overFadeAnimation;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:.1s;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-fill-mode:forwards}#over div.over-ground div.again,#over div.over-ground div.more-game,#over div.over-ground div.show-off{height:40px;line-height:40px}#over div.over-ground div.again{opacity:0;-webkit-animation-name:overFadeAnimation;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:.2s;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-fill-mode:forwards}#over div.over-ground div.more-game,#over div.over-ground div.show-off{opacity:0;-webkit-animation-name:overFadeAnimation;-webkit-animation-duration:.5s;-webkit-animation-timing-function:ease-in-out;-webkit-animation-delay:.3s;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-fill-mode:forwards}@-webkit-keyframes 'overFadeAnimation'{from{opacity:0}to{opacity:1}}#share{display:none;z-index:6;background-color:rgba(0,0,0,.9);color:#666;-webkit-transform:translate3d(0,0,0)}#share div.back{border:2px solid #666;border-radius:5px;padding:5px;text-align:center;width:60px;position:absolute;bottom:30%;margin:auto;left:0;right:0}#share img.share-logo{position:absolute;right:20px}#share div.share-text{position:absolute;right:40px;top:130px;-webkit-transform:rotateZ(8deg);font-size:14px}.ground{position:absolute;width:100%;background-color:#fed37f;left:0}.ground.up-ground{top:0}.ground.down-ground{bottom:0}.angle{position:absolute;left:0;height:0;width:0}.wall{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;width:20px;position:absolute;top:0;bottom:0;margin:auto;height:100%}.wall.left-wall{left:0}.wall.right-wall{right:0}img.showScore{display:none;position:absolute;opacity:1;top:0;left:0;width:30px;height:20px;-webkit-animation-name:showScoreAnimation;-webkit-animation-duration:.6s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0s;-webkit-animation-iteration-count:1;-webkit-animation-direction:normal;-webkit-animation-fill-mode:backwards}@-webkit-keyframes "showScoreAnimation"{0%{opacity:1;-webkit-transform:translate3d(0,0,0)}100%{opacity:0;-webkit-transform:translate3d(0,-20px,0)}}img.candy{display:none;position:absolute;top:0;left:0;-webkit-animation-name:candyAnimation;-webkit-animation-duration:1s;-webkit-animation-timing-function:linear;-webkit-animation-delay:0s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:normal}@-webkit-keyframes "candyAnimation"{0%{-webkit-transform:translate3d(0,0,0)}50%{-webkit-transform:translate3d(0,10px,0)}100%{-webkit-transform:translate3d(0,0,0)}}.dead-animation{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:all .4s ease;-moz-transition:all .4s ease;-ms-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}.circle{text-align:center;position:absolute;margin:auto;width:185px;height:185px;background-color:#f7f7f7;border-radius:185px;top:0;bottom:0;left:0;right:0;-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);-o-transform:translateY(-20px);transform:translateY(-20px)}.circle .instruction{font-weight:700;margin-top:10px;color:#6b6480}.circle .instruction .chang{line-height:25px;margin-top:80px;text-align:center}.circle .instruction .chang img{vertical-align:-2px}.circle .score{position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;font-size:80px;height:80px;color:#e6e2f4;font-weight:bolder;text-align:center;line-height:80px;font-family:Helvetica,sans-serif}.circle h1.name{position:absolute;margin-left:16px;top:-70px;text-align:center;white-space:pre;color:#6b6480}.circle h2.highest-score{position:absolute;margin-left:14px;bottom:-70px;text-align:center;white-space:pre;color:#fff}