You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
469 lines
16 KiB
CSS
469 lines
16 KiB
CSS
html {font-size:20px;}
|
|
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; font-family:Microsoft YaHei,Helvetica Neue,Helvetica,Roboto,Heiti SC,STHeiTi,Arial,sans-serif;; line-height:1rem; }
|
|
body {font-size:1rem; min-width:16rem; background:#fff; color:#000;}
|
|
body{-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -webkit-touch-callout:none; word-break:break-all;}
|
|
ul,li{list-style:none;}
|
|
input,textarea{vertical-align:middle; font-size:100%;}
|
|
textarea{overflow: auto;vertical-align: middle}
|
|
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
|
|
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,iframe{display: block}
|
|
em,i{font-style:normal; font-size:100%;}
|
|
img{max-width: 100%; vertical-align: middle; border: 0 none; -ms-interpolation-mode: bicubic;}
|
|
button, input, select, textarea{margin: 0; font-size: 100%; vertical-align: middle; border-radius:0; -webkit-appearance: none; -webkit-tap-highlight-color:transparent; outline:0 none;}
|
|
.center {text-align:center;}
|
|
input[type=button]{outline:none}
|
|
input::-ms-clear{display:none;}
|
|
a,a:visited,a:link { text-decoration:none; color:#fff; /*-webkit-tap-highlight-color:transparent;*/}
|
|
a:active{ color:#fff; -webkit-tap-highlight-color:rgba(0,0,0,.2); text-decoration:none;}
|
|
|
|
/*通用*/
|
|
.left{float: left;}
|
|
.right{float: right;}
|
|
.clear{clear: both;}
|
|
|
|
.header{width: 100%;height: 818px;background:url("../images/down/pcbg.png");color: #fff}
|
|
.container{width: 1200px;margin: 0 auto;}
|
|
/*导航*/
|
|
.nav{overflow: hidden;}
|
|
.nav .logo{position:absolute;margin-top:10px;display: block;width: 185px;height: 62px;}
|
|
.nav .nav-menu{}
|
|
.nav .nav-menu li{display: inline-block;margin-left: 50px;}
|
|
.nav .nav-item{display: inline-block;padding-left: 42px;height: 62px;line-height: 62px;}
|
|
.nav .nav-item:hover{color:#4affd9}
|
|
.nav .game{background: url("../images/down/icon_game.png") no-repeat left center;}
|
|
.nav .game:hover{background: url("../images/down/icon_game_hover.png") no-repeat left center;}
|
|
.nav .play{background: url("../images/down/icon_yiquwang.png") no-repeat left center;}
|
|
.nav .play:hover{background: url("../images/down/icon_yiquwang_hover.png") no-repeat left center;}
|
|
.nav .group{background: url("../images/down/icon_xiaozhu.png") no-repeat left center;}
|
|
.nav .group:hover{background: url("../images/down/icon_xiaozhu_hover.png") no-repeat left center;}
|
|
.nav .charge{background: url("../images/down/icon_chongzhi.png") no-repeat left center;}
|
|
.nav .charge:hover{background: url("../images/down/icon_chongzhi_hover.png") no-repeat left center;}
|
|
|
|
.head-content{overflow: hidden}
|
|
|
|
.head-left{width: 50%;}
|
|
.left-content{margin-left: 55px;margin-top: 90px;}
|
|
.gpGame{overflow: hidden}
|
|
.gpGame img{display: block;width:auto;}
|
|
.gpText{font-size: 1.8rem;margin-top: 35px;height: 40px;line-height: 40px;}
|
|
.download-part{margin-top: 120px;overflow: hidden;text-align: center;}
|
|
.download{overflow: hidden}
|
|
.loadBtn{display: block;box-shadow: 0px 4px 4px #26acdd;width: 280px;height: 90px;background-color: #ff9600;line-height: 90px;font-size: 1.8rem;padding-left: 65px;border-radius: 10px;}
|
|
.loadBtn:hover{background-color: #f17100}
|
|
.loadBtn:before{content: "";position: absolute;display: block;width: 56px;height: 56px;margin-top:16px;margin-left:0px;background: url("../images/down/btn-icon.png") no-repeat center;}
|
|
.versionInfo{margin-top: 15px;font-size: 0.9rem}
|
|
.code{padding: 6px;border-radius: 10px;width: 113px;height: 113px;margin-left: 40px;background-color: #fff}
|
|
.code img{width:100%;height: 100%}
|
|
|
|
.head-right{width: 50%;position: relative;height: 756px;}
|
|
.head-right img{display:block;bottom: 0;position: absolute;left: 105px;}
|
|
|
|
/*介绍内容*/
|
|
.content{padding-top: 100px;background-color: #fff;}
|
|
.item-container{position: relative;}
|
|
.white{background-color: #fff}
|
|
.gray{background-color: #fafafa}
|
|
.intro-item{width: 100%;height: 620px;padding-top: 70px;}
|
|
.intro-item .item-left{left: 0;}
|
|
.intro-item .item-right{right: 0;}
|
|
|
|
.intro-img{position: absolute;}
|
|
.intro-img img{width: auto;height: auto;}
|
|
|
|
.intro-text{position: absolute;color: #000}
|
|
.intro-title{;color:#dddddd;overflow: hidden;font-size: 3.6rem;height: 85px;line-height: 85px;}
|
|
.intro-content1{;font-size: 2.4rem;font-weight: 400;height: 55px;line-height: 55px;}
|
|
.intro-content2{max-width: 650px;font-size: 1.4rem;line-height: 45px;margin-top: 50px;font-weight: 100;color:#7f7f7f }
|
|
|
|
/*游戏*/
|
|
.iconGroup{position: absolute;width: 469px;height: 313px;top:0;left: 0;
|
|
|
|
opacity: 0;transform:scale(0);transition:all 1s ease 0.6s;
|
|
-moz-transform:scale(0);-moz-transition:all 1s ease 0.6s;
|
|
-webkit-transform:scale(0);-webkit-transition:all 1s ease 0.6s;
|
|
-o-transform:scale(0);-o-transition:all 1s ease 0.6s;
|
|
}
|
|
.iconGroup.active{
|
|
opacity: 1;
|
|
transform:scale(1);
|
|
-webkit-transform:scale(1);
|
|
-moz-transform:scale(1);
|
|
-o-transform:scale(1);
|
|
}
|
|
.icon1{position: absolute;top:112px;left:223px;}
|
|
.icon2{position: absolute;top:2px;left:253px;}
|
|
.icon3{position: absolute;top:92px;left:310px;}
|
|
.icon4{position: absolute;top:62px;left:381px;}
|
|
.icon5{position: absolute;top:-83px;left:308px;}
|
|
.icon6{position: absolute;top:-117px;left:424px;}
|
|
.icon7{position: absolute;top:-102px;left:504px;}
|
|
.icon8{position: absolute;top:-72px;left:365px;}
|
|
.iconGroup.active .icon1,.iconGroup.active .icon3,.iconGroup.active .icon5,.iconGroup.active .icon7{
|
|
animation: up 2s linear infinite alternate;
|
|
-moz-animation: up 2s linear infinite alternate;
|
|
-webkit-animation: up 2s linear infinite alternate;
|
|
-o-animation: up 2s linear infinite alternate;}
|
|
.iconGroup.active .icon2,.iconGroup.active .icon4,.iconGroup.active .icon6,.iconGroup.active .icon8{
|
|
animation: down 2s linear infinite alternate;
|
|
-moz-animation: down 2s linear infinite alternate;
|
|
-webkit-animation: down 2s linear infinite alternate;
|
|
-o-animation: down 2s linear infinite alternate;}
|
|
|
|
|
|
|
|
/*专区*/
|
|
.hand{position: absolute;top:164px;left: 196px;transform-origin: left center;
|
|
transform:rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
-moz-transform:rotate(0deg);
|
|
-webkit-transform:rotate(0deg);
|
|
-o-transform:rotate(0deg); }
|
|
.hand.active{animation: handShape 3s linear infinite alternate;
|
|
-moz-animation: handShape 3s linear infinite alternate; /* Firefox */
|
|
-webkit-animation: handShape 3s linear infinite alternate; /* Safari 和 Chrome */
|
|
-o-animation: handShape 3s linear infinite alternate;}
|
|
.water{position:absolute;width:86px;background-color:#5272a8;height: 32px;border-radius: 10px 10px 0 0;top:219px;left: 344px;}
|
|
.water.active{animation: water 2s linear infinite alternate;
|
|
-moz-animation: water 2s linear infinite alternate; /* Firefox */
|
|
-webkit-animation: water 2s linear infinite alternate; /* Safari 和 Chrome */
|
|
-o-animation: water 2s linear infinite alternate;}
|
|
|
|
/*礼包*/
|
|
.intro3Group{position: absolute;width: 304px;height: 228px;top:0;left: 0;
|
|
transform: translateY(210px) translateX(50px) scale(0);opacity: 0;transition:all 1s ease 0.6s;
|
|
-moz-transform: translateY(210px) translateX(50px) scale(0);-moz-transition:all 1s ease 0.6s;
|
|
-webkit-transform: translateY(210px) translateX(50px) scale(0);-webkit-transition:all 1s ease 0.6s;
|
|
-o-transform: translateY(210px) translateX(50px) scale(0);-o-transition:all 1s ease 0.6s}
|
|
.intro3Group.active{opacity: 1;
|
|
transform: translateY(0px) translateX(0px) scale(1);
|
|
-moz-transform: translateY(0px) translateX(0px) scale(1);
|
|
-webkit-transform: translateY(0px) translateX(0px) scale(1);
|
|
-o-transform: translateY(0px) translateX(0px) scale(1);
|
|
}
|
|
.intro3-1{position: absolute;width: auto;height: auto;top:277px;left: 177px;}
|
|
.intro3-2{position: absolute;width: auto;height: auto;top:203px;left: 87px;}
|
|
.intro3-3{position: absolute;width: auto;height: auto;top:135px;left: 227px;}
|
|
.intro3-4{position: absolute;width: auto;height: auto;top:247px;left: 282px;}
|
|
.intro3Group.active .intro3-1,.intro3Group.active .intro3-3{
|
|
animation-delay:1s;
|
|
animation: up 2s linear infinite alternate;
|
|
-moz-animation: up 2s linear infinite alternate; /* Firefox */
|
|
-webkit-animation: up 2s linear infinite alternate; /* Safari 和 Chrome */
|
|
-o-animation: up 2s linear infinite alternate;
|
|
}
|
|
.intro3Group.active .intro3-2,.intro3Group.active .intro3-4{
|
|
animation: down 2s linear infinite alternate;
|
|
-moz-animation: down 2s linear infinite alternate; /* Firefox */
|
|
-webkit-animation: down 2s linear infinite alternate; /* Safari 和 Chrome */
|
|
-o-animation: down 2s linear infinite alternate;
|
|
}
|
|
|
|
|
|
|
|
/*好友*/
|
|
.blueMan{position: absolute;top:351px;left: 128px;z-index: 50}
|
|
.yellowMan{position: absolute;top:180px;left: 96px;z-index: 50}
|
|
.redMan{position: absolute;top:215px;left: 228px;z-index: 50}
|
|
.r_blue{position: absolute;top:324px;left: 99px;}
|
|
.r_yellow{position: absolute;top:155px;left: 69px;}
|
|
.r_red{position: absolute;top:185px;left: 197px;}
|
|
.r_blue.active{animation: rotBack 6s linear infinite ;
|
|
-moz-animation: rotBack 6s linear infinite ; /* Firefox */
|
|
-webkit-animation: rotBack 6s linear infinite ; /* Safari 和 Chrome */
|
|
-o-animation: rotBack 6s linear infinite ;}
|
|
.r_yellow.active{animation: rotBack 6s linear infinite ;
|
|
-moz-animation: rotBack 6s linear infinite ; /* Firefox */
|
|
-webkit-animation: rotBack 6s linear infinite ; /* Safari 和 Chrome */
|
|
-o-animation: rotBack 6s linear infinite ;}
|
|
.r_red.active{animation: rot 6s linear infinite ;
|
|
-moz-animation: rot 6s linear infinite ; /* Firefox */
|
|
-webkit-animation: rot 6s linear infinite ; /* Safari 和 Chrome */
|
|
-o-animation: rot 6s linear infinite ;}
|
|
|
|
|
|
|
|
.l_r{-webkit-animation:l_r 1s ease;-moz-animation:l_r 1s ease;-o-animation:l_r 1s ease;animation: l_r 1s ease;-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;-o-animation-fill-mode:backwards;animation-fill-mode:backwards}
|
|
.r_l{-webkit-animation:r_l 1s ease;-moz-animation:r_l 1s ease;-o-animation:r_l 1s ease;animation: r_l 1s ease;-webkit-animation-fill-mode:backwards;-moz-animation-fill-mode:backwards;-o-animation-fill-mode:backwards;animation-fill-mode:backwards}
|
|
|
|
|
|
|
|
.footer{background-color: #fff;}
|
|
.footer p{ font-size: 16px; color: #000;text-align: center}
|
|
.footer .first{ margin-top: 40px;}
|
|
.footer .second{ margin-top: 10px;margin-bottom: 30px}
|
|
|
|
@keyframes handShape
|
|
{
|
|
from {transform:rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
-moz-transform:rotate(0deg);
|
|
-webkit-transform:rotate(0deg);
|
|
-o-transform:rotate(0deg);}
|
|
to {transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);}
|
|
}
|
|
|
|
@-moz-keyframes handShape /* Firefox */
|
|
{
|
|
from {transform:rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
-moz-transform:rotate(0deg);
|
|
-webkit-transform:rotate(0deg);
|
|
-o-transform:rotate(0deg);}
|
|
to {transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);}
|
|
}
|
|
|
|
@-webkit-keyframes handShape /* Safari 和 Chrome */
|
|
{
|
|
from {transform:rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
-moz-transform:rotate(0deg);
|
|
-webkit-transform:rotate(0deg);
|
|
-o-transform:rotate(0deg);}
|
|
to {transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);}
|
|
}
|
|
|
|
@-o-keyframes handShape /* Opera */
|
|
{
|
|
from {transform:rotate(0deg);
|
|
-ms-transform:rotate(0deg);
|
|
-moz-transform:rotate(0deg);
|
|
-webkit-transform:rotate(0deg);
|
|
-o-transform:rotate(0deg);}
|
|
to {transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);}
|
|
}
|
|
@keyframes water
|
|
{
|
|
from {height: 32px }
|
|
to {height: 10px}
|
|
}
|
|
|
|
@-moz-keyframes water /* Firefox */
|
|
{
|
|
from {height: 32px }
|
|
to {height: 10px}
|
|
}
|
|
|
|
@-webkit-keyframes water /* Safari 和 Chrome */
|
|
{
|
|
from {height: 32px }
|
|
to {height: 10px}
|
|
}
|
|
|
|
@-o-keyframes water /* Opera */
|
|
{
|
|
from {height: 32px }
|
|
to {height: 10px}
|
|
}
|
|
@keyframes up
|
|
{
|
|
from{transform:translateY(0px);}
|
|
to{transform:translateY(-30px);}
|
|
}
|
|
|
|
@-moz-keyframes up /* Firefox */
|
|
{
|
|
from{-moz-transform:translateY(0px);}
|
|
to{-moz-transform:translateY(-30px);}
|
|
}
|
|
|
|
@-webkit-keyframes up /* Safari 和 Chrome */
|
|
{
|
|
from{-webkit-transform:translateY(0px);}
|
|
to{-webkit-transform:translateY(-30px);}
|
|
}
|
|
|
|
@-o-keyframes up /* Opera */
|
|
{
|
|
from{-o-transform:translateY(0px);}
|
|
to{-o-transform:translateY(-30px);}
|
|
}
|
|
@keyframes down
|
|
{
|
|
from{transform:translateY(0px);}
|
|
to{transform:translateY(10px);}
|
|
}
|
|
|
|
@-moz-keyframes down /* Firefox */
|
|
{
|
|
from{-moz-transform:translateY(0px);}
|
|
to{-moz-transform:translateY(10px);}
|
|
}
|
|
|
|
@-webkit-keyframes down /* Safari 和 Chrome */
|
|
{
|
|
from{-webkit-transform:translateY(0px);}
|
|
to{-webkit-transform:translateY(10px);}
|
|
}
|
|
|
|
@-o-keyframes down /* Opera */
|
|
{
|
|
from{-o-transform:translateY(0px);}
|
|
to{-o-transform:translateY(10px);}
|
|
}
|
|
@keyframes rot
|
|
{
|
|
from {transform:rotate(0deg); }
|
|
to {transform:rotate(360deg); }
|
|
}
|
|
|
|
@-moz-keyframes rot /* Firefox */
|
|
{
|
|
from {-moz-transform:rotate(0deg); }
|
|
to {-moz-transform:rotate(360deg); }
|
|
}
|
|
|
|
@-webkit-keyframes rot /* Safari 和 Chrome */
|
|
{
|
|
from {-webkit-transform:rotate(0deg); }
|
|
to {-webkit-transform:rotate(360deg); }
|
|
}
|
|
|
|
@-o-keyframes rot /* Opera */
|
|
{
|
|
from {-o-transform:rotate(359deg); }
|
|
to {-o-transform:rotate(0deg); }
|
|
}
|
|
@keyframes rotBack
|
|
{
|
|
from {transform:rotate(359deg); }
|
|
to {transform:rotate(0deg); }
|
|
}
|
|
|
|
@-moz-keyframes rotBack /* Firefox */
|
|
{
|
|
from {-moz-transform:rotate(359deg); }
|
|
to {-moz-transform:rotate(0deg); }
|
|
}
|
|
|
|
@-webkit-keyframes rotBack /* Safari 和 Chrome */
|
|
{
|
|
from {-webkit-transform:rotate(359deg); }
|
|
to {-webkit-transform:rotate(0deg); }
|
|
}
|
|
|
|
@-o-keyframes rotBack /* Opera */
|
|
{
|
|
from {-o-transform:rotate(359deg); }
|
|
to {-o-transform:rotate(0deg); }
|
|
}
|
|
/*出现*/
|
|
@keyframes appear
|
|
{
|
|
from{transform:translateY(-180px);transform:translateX(-180px);opacity: 0;transform: scale(0)}
|
|
to{transform:translateY(0px);transform:translateX(0px);opacity: 1;transform: scale(1);}
|
|
}
|
|
|
|
@-moz-keyframes appear /* Firefox */
|
|
{
|
|
from{-moz-transform:translateY(-180px);-moz-transform:translateX(-180px);opacity: 0;-moz-transform: scale(0)}
|
|
to{-moz-transform:translateY(0px);-moz-transform:translateX(0px);opacity: 1;-moz-transform: scale(1);}
|
|
}
|
|
|
|
@-webkit-keyframes appear /* Safari 和 Chrome */
|
|
{
|
|
from{-webkit-transform:translateY(-180px);-webkit-transform:translateX(-180px);opacity: 0;-webkit-transform: scale(0)}
|
|
to{-webkit-transform:translateY(0px);-webkit-transform:translateX(0px);opacity: 1;-webkit-transform: scale(1);}
|
|
}
|
|
|
|
@-o-keyframes appear /* Opera */
|
|
{
|
|
from{-o-transform:translateY(-180px);-o-transform:translateX(-180px);opacity: 0;-o-transform: scale(0)}
|
|
to{-o-transform:translateY(0px);-o-transform:translateX(0px);opacity: 1;-o-transform: scale(1);}
|
|
}
|
|
|
|
@-webkit-keyframes l_r {
|
|
0% {
|
|
-webkit-transform:translateX(-180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-webkit-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@-moz-keyframes l_r {
|
|
0% {
|
|
-moz-transform:translateX(-180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-moz-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@-o-keyframes l_r {
|
|
0% {
|
|
-o-transform:translateX(-180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-o-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@keyframes l_r {
|
|
0% {
|
|
transform:translateX(-180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@-webkit-keyframes r_l {
|
|
0% {
|
|
-webkit-transform:translateX(180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-webkit-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@-moz-keyframes r_l {
|
|
0% {
|
|
-moz-transform:translateX(180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-moz-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@-o-keyframes r_l {
|
|
0% {
|
|
-o-transform:translateX(180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
-o-transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
}
|
|
@keyframes r_l {
|
|
0% {
|
|
transform:translateX(180px);
|
|
opacity:0
|
|
}
|
|
100% {
|
|
transform:translateX(0px);
|
|
opacity:1
|
|
}
|
|
} |