123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331 |
- body {
- font-family: Helvetica
- }
- button {
- border: 0;
- cursor: pointer;
- outline: 0;
- padding: 0
- }
- .container {
- background: url(../img/t012d91cb114412fd53.png) no-repeat;
- background-size: 100% 100%;
- overflow: hidden;
- position: relative
- }
- .container,.page {
- height: 100%;
- width: 100%
- }
- .page {
- left: 0;
- opacity: 0;
- top: 0;
- -webkit-transform: scale(1.5);
- -ms-transform: scale(1.5);
- -o-transform: scale(1.5);
- transform: scale(1.5);
- -webkit-transition: all .2s ease;
- -o-transition: all .2s ease;
- transition: all .2s ease;
- z-index: 1
- }
- .page,.slogan {
- position: absolute
- }
- .slogan {
- height: 134px;
- left: 50%;
- margin-left: -146px;
- top: 11.5%;
- width: 293px
- }
- .bucket-wr {
- bottom: 20%;
- left: 0;
- position: absolute;
- width: 100%
- }
- .tip {
- bottom: 5.2%;
- color: #f2ffff;
- font-size: 14px;
- left: 0;
- text-align: center;
- width: 100%
- }
- .timer,.perf {
- color: #fff;
- font-size: 25px;
- line-height: 55px;
- position: absolute;
- text-align: center;
- z-index: 100
- }
- .timer {
- background: url(../img/t01d9deda4a62bcd492.png) no-repeat center center;
- background-size: 100% 100%;
- left: 18px;
- width: 44px
- }
- .timer,.perf {
- height: 50px;
- top: 15px
- }
- .perf {
- background: url(../img/t01009ccc37c69695ae.png) no-repeat center center;
- background-size: 100% 100%;
- right: 18px;
- width: 92px;
- text-indent: 45px
- }
- .hand {
- background: url(../img/t01d69a0f1bbabbd20d.png) no-repeat center center;
- background-size: 100% 100%;
- height: 172px;
- left: 50%;
- margin-left: -97px;
- position: absolute;
- top: -172px;
- -webkit-transform: translateY(0);
- -ms-transform: translateY(0);
- -o-transform: translateY(0);
- transform: translateY(0);
- -webkit-transition: all .5s ease;
- -o-transition: all .5s ease;
- transition: all .5s ease;
- width: 239px;
- z-index: 20
- }
- .water-wr {
- left: 50%;
- margin-left: -65px;
- overflow: hidden;
- top: 136px;
- width: 79px;
- z-index: 100
- }
- .water-wr,.water-wr .water {
- height: 136px;
- position: absolute
- }
- .man {
- background: url(../img/t0149ba9251a57dcdd8.png) no-repeat center 0;
- bottom: 20%;
- height: 204px;
- left: 50%;
- margin-left: -62px;
- position: absolute;
- width: 124px;
- z-index: 10
- }
- .end {
- background-color: rgba(0, 0, 0, 0.8)
- }
- .result-plate {
- background: url(../img/t01571804856cbcdc50.png) no-repeat center top;
- background-size: 100% 100%;
- height: 200px;
- left: 50%;
- margin: -100px 0 0 -127px;
- overflow: hidden;
- position: absolute;
- top: 50%;
- width: 255px
- }
- .share {
- background: rgba(0, 0, 0, 0.8)
- }
- .preload {
- display: none
- }
- .slogan p {
- color: transparent;
- position: absolute
- }
- .share img {
- position: absolute;
- right: 18px;
- top: 8px;
- width: 255px
- }
- .page.show {
- opacity: 1;
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
- z-index: 2
- }
- .bucket-wr .bucket {
- background: url(../img/t01daf9b891303bde71.png) no-repeat center center;
- background-size: 100% 100%;
- height: 169px;
- margin: 0 auto;
- width: 170px;
- z-index: 5
- }
- .bucket-wr .ice-bundle {
- background: url(../img/t01b0d13bc06b034196.png) no-repeat center center;
- background-size: 100% 100%;
- bottom: -23px;
- height: 140px;
- left: 50%;
- margin-left: -86px;
- position: absolute;
- width: 180px;
- z-index: 10
- }
- .bucket-wr .waterlogging {
- background: url(../img/t01a3a0419169434f20.png) no-repeat center center;
- background-size: 100% 100%;
- bottom: -27px;
- height: 44px;
- left: 50%;
- margin-left: -123px;
- position: absolute;
- width: 246px;
- z-index: 1
- }
- .start .button-wr {
- bottom: 9.4%;
- height: 46px;
- left: 50%;
- margin-left: -72px;
- position: absolute;
- width: 144px;
- z-index: 20
- }
- .hand.down {
- -webkit-transform: translateY(100%);
- -ms-transform: translateY(100%);
- -o-transform: translateY(100%);
- transform: translateY(100%)
- }
- .water-wr .water {
- background: url(../img/t0180c14a91a97ae9e1.png) no-repeat center center;
- background-size: 100% 100%;
- left: 0;
- top: -136px;
- width: 100%;
- z-index: 101
- }
- .man.wet {
- background: url(../img/t01aaa8c8e84d5c62d7.png) no-repeat center 8px
- }
- .result-plate .result {
- color: #fff;
- font-size: 18px;
- line-height: 1.5em;
- margin-top: 75px;
- text-align: center
- }
- .result-plate .button-wr {
- margin: 20px 15px 0
- }
- .slogan p:nth-of-type (1){
- background: url(../img/t01989815e00e10affe.png) no-repeat center center;
- background-size: 100% 100%;
- height: 89px;
- left: 0;
- top: 0;
- width: 149px
- }
- .slogan p:nth-of-type (2){
- background: url(../img/t01137fe3a51d823ca2.png) no-repeat center center;
- background-size: 100% 100%;
- bottom: 0;
- height: 77px;
- right: 0;
- width: 221px
- }
- .start .button-wr button {
- background: url(../img/t019c42b49b127627db.png) no-repeat center center;
- background-size: 100% 100%;
- height: 100%;
- width: 100%
- }
- .result-plate .button-wr button {
- background: url(../img/t0128e7249da3cbf9f7.png) no-repeat;
- height: 37px
- }
- .start .button-wr .star,#pour,.tip {
- position: absolute
- }
- #pour {
- background: url(../img/t01f885478422edd710.png) no-repeat center center;
- background-size: 100% 100%;
- bottom: 8%;
- height: 45px;
- left: 50%;
- margin-left: -70px;
- -webkit-user-select: none;
- width: 140px
- }
- #again {
- background: url(../img/t011d9cf1fd5410688d.png) no-repeat center center;
- background-size: 100% 100%;
- float: left;
- width: 105px
- }
- #challenge {
- background: url(../img/t0118fb1cdcdb89b19d.png) no-repeat center center;
- background-size: 100% 100%;
- float: right;
- width: 110px
- }
- #promo {
- background: url(../img/t01a7ae6c8216abc7d2.png) no-repeat center center;
- background-size: 100% 100%;
- bottom: 10px;
- height: 40px;
- left: 50%;
- margin-left: -125px;
- position: absolute;
- width: 250px
- }
- #pour.hover {
- background-position: left top
- }
|