2024-10-10
This commit is contained in:
349
web/template/sweet/css/login.css
Executable file
349
web/template/sweet/css/login.css
Executable file
@@ -0,0 +1,349 @@
|
||||
|
||||
* {
|
||||
margin: 0px auto;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
font-family: 'Lato', sans-serif;
|
||||
}
|
||||
|
||||
.cotn_principal {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cfd8dc+0,607d8b+100,b0bec5+100 */
|
||||
background: #aac4bc; /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, #aac4bc 0%, #eca8a8 100%, #eed5a9 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, #aac4bc 0%,#eca8a8 100%,#eed5a9 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, #aac4bc 0%,#eca8a8 100%,#eed5a9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfd8dc', endColorstr='#b0bec5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.cont_centrar {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.cont_login {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
left: 50%;
|
||||
margin-left: -320px;
|
||||
|
||||
}
|
||||
|
||||
.cont_back_info {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 640px;
|
||||
height: 280px;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
margin-top: 100px;
|
||||
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.cont_forms {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top:100px;
|
||||
left: 0px;
|
||||
width: 320px;
|
||||
height: 280px;
|
||||
background-color: #eee;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.cont_forms_active_login {
|
||||
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
|
||||
height: 420px;
|
||||
top:20px;
|
||||
left: 0px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
|
||||
}
|
||||
|
||||
.cont_forms_active_sign_up {
|
||||
box-shadow: 1px 10px 30px -10px rgba(0,0,0,0.5);
|
||||
height: 520px;
|
||||
top:20px;
|
||||
left:320px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.cont_img_back_grey {
|
||||
position: absolute;
|
||||
width: 950px;
|
||||
top:-80px;
|
||||
left: -116px;
|
||||
}
|
||||
|
||||
.cont_img_back_grey > img {
|
||||
width: 100%;
|
||||
-webkit-filter: grayscale(100%); filter: grayscale(100%);
|
||||
opacity: 0.8;
|
||||
animation-name: animar_fondo;
|
||||
animation-duration: 20s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
|
||||
}
|
||||
|
||||
.cont_img_back_ {
|
||||
position: absolute;
|
||||
width: 950px;
|
||||
top:-80px;
|
||||
left: -116px;
|
||||
}
|
||||
|
||||
.cont_img_back_ > img {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
animation-name: animar_fondo;
|
||||
animation-duration: 20s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
|
||||
.cont_forms_active_login > .cont_img_back_ {
|
||||
top:0px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.cont_forms_active_sign_up > .cont_img_back_ {
|
||||
top:0px;
|
||||
left: -435px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.cont_info_log_sign_up {
|
||||
position: absolute;
|
||||
width: 640px;
|
||||
height: 280px;
|
||||
top: 100px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.col_md_login {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.col_md_login > h2 {
|
||||
font-weight: 400;
|
||||
margin-top: 70px;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.col_md_login > p {
|
||||
font-weight: 400;
|
||||
margin-top: 15px;
|
||||
width: 80%;
|
||||
color: #37474F;
|
||||
}
|
||||
|
||||
.btn_login {
|
||||
background-color: #FF9800;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
width: 200px;
|
||||
border-radius:3px;
|
||||
box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4);
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.col_md_sign_up {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.cont_ba_opcitiy > h2 {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cont_ba_opcitiy > p {
|
||||
font-weight: 400;
|
||||
margin-top: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
/* ----------------------------------
|
||||
background text
|
||||
------------------------------------
|
||||
*/
|
||||
.cont_ba_opcitiy {
|
||||
position: relative;
|
||||
background-color: rgba(187, 168, 170, 0.79);
|
||||
width: 80%;
|
||||
border-radius:3px ;
|
||||
margin-top: 60px;
|
||||
padding: 15px 0px;
|
||||
}
|
||||
|
||||
.btn_sign_up {
|
||||
background-color: #f44336;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
width: 200px;
|
||||
border-radius:3px;
|
||||
box-shadow: 1px 5px 20px -5px rgba(0,0,0,0.4);
|
||||
color: #fff;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cont_forms_active_sign_up {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes animar_fondo {
|
||||
from { -webkit-transform: scale(1) translate(0px);
|
||||
-moz-transform: scale(1) translate(0px);
|
||||
-ms-transform: scale(1) translate(0px);
|
||||
-o-transform: scale(1) translate(0px);
|
||||
transform: scale(1) translate(0px); }
|
||||
to { -webkit-transform: scale(1.5) translate(50px);
|
||||
-moz-transform: scale(1.5) translate(50px);
|
||||
-ms-transform: scale(1.5) translate(50px);
|
||||
-o-transform: scale(1.5) translate(50px);
|
||||
transform: scale(1.5) translate(50px); }
|
||||
}
|
||||
@-o-keyframes identifier {
|
||||
from { -webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
to { -webkit-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5); }
|
||||
|
||||
}
|
||||
@-moz-keyframes identifier {
|
||||
from { -webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
to { -webkit-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5); }
|
||||
|
||||
}
|
||||
@keyframes identifier {
|
||||
from { -webkit-transform: scale(1);
|
||||
-moz-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1); }
|
||||
to { -webkit-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5); }
|
||||
}
|
||||
.cont_form_login {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
width: 320px;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
.cont_forms_active_login {
|
||||
z-index: 2;
|
||||
}
|
||||
.cont_forms_active_login >.cont_form_login {
|
||||
}
|
||||
|
||||
.cont_form_sign_up {
|
||||
position: absolute;
|
||||
width: 320px;
|
||||
float: left;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
-webkit-transition: all 0.5s;
|
||||
-moz-transition: all 0.5s;
|
||||
-ms-transition: all 0.5s;
|
||||
-o-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.cont_form_sign_up > input {
|
||||
text-align: left;
|
||||
padding: 15px 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 20px;
|
||||
width: 260px;
|
||||
border: none;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.cont_form_sign_up > h2 {
|
||||
margin-top: 50px;
|
||||
font-weight: 400;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
|
||||
.cont_form_login > input {
|
||||
padding: 15px 5px;
|
||||
margin-left: 10px;
|
||||
margin-top: 20px;
|
||||
width: 260px;
|
||||
border: none;
|
||||
text-align: left;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.cont_form_login > h2 {
|
||||
margin-top: 110px;
|
||||
font-weight: 400;
|
||||
color: #757575;
|
||||
}
|
||||
.cont_form_login > a,.cont_form_sign_up > a {
|
||||
color: #757575;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 10px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
764
web/template/sweet/css/style.css
Normal file
764
web/template/sweet/css/style.css
Normal file
@@ -0,0 +1,764 @@
|
||||
body,
|
||||
html {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.footer,
|
||||
.header {
|
||||
z-index: 99
|
||||
}
|
||||
|
||||
.clearfix:after,
|
||||
.page_1 .page_bg:before {
|
||||
content: ""
|
||||
}
|
||||
|
||||
html {
|
||||
+overflow: hidden
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.header,
|
||||
.wrap,
|
||||
.wrapper {
|
||||
position: absolute;
|
||||
top: 0
|
||||
}
|
||||
|
||||
body,
|
||||
dd,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
input,
|
||||
li,
|
||||
ol,
|
||||
p,
|
||||
table,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
table {
|
||||
width: auto;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0
|
||||
}
|
||||
|
||||
.footer,
|
||||
.header,
|
||||
.wrap,
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
left: 0
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
vertical-align: bottom
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
font-style: normal
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.btn_download:hover,
|
||||
.header .nav_box a:hover {
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
img {
|
||||
border: 0
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.hide_txt {
|
||||
text-indent: -9999em;
|
||||
font-size: 0;
|
||||
line-height: 0
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
height: 0
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
.wrap {
|
||||
font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, sans-serif;
|
||||
font-family: "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "微软雅黑", tahoma, arial, simsun, "宋体"
|
||||
}
|
||||
|
||||
.wrap,
|
||||
.wrapper {
|
||||
height: 100%;
|
||||
background: #000;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.header .head {
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.header .logo_box {
|
||||
float: left
|
||||
}
|
||||
|
||||
.header .logo_link img {
|
||||
display: block
|
||||
}
|
||||
|
||||
.header .nav_box {
|
||||
float: right;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.header .nav_box li {
|
||||
float: left;
|
||||
padding: 0 10px
|
||||
}
|
||||
|
||||
.header .nav_box a {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
padding: 0 6px;
|
||||
display: block
|
||||
}
|
||||
|
||||
.header .nav_box .ic_line {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
background: #fff;
|
||||
bottom: 6px;
|
||||
width: 40px;
|
||||
transition: left .2s, width .2s;
|
||||
-webkit-transition: left .2s, width .2s;
|
||||
display: none
|
||||
}
|
||||
|
||||
.page,
|
||||
.page_wp {
|
||||
top: 0;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 12px
|
||||
}
|
||||
|
||||
.page_wp,
|
||||
.page_wp .txt_box {
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.footer .foot {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #4c4c4c
|
||||
}
|
||||
|
||||
.page_wp {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.page {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.page_wp .show {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.page_wp .txt_box {
|
||||
bottom: 140px;
|
||||
left: 0;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
transition: opacity .8s;
|
||||
-webkit-transition: opacity .8s
|
||||
}
|
||||
|
||||
.page_wp .show .txt_box {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.page_wp .txt_box h2 {
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
font-weight: lighter;
|
||||
line-height: 40px
|
||||
}
|
||||
|
||||
.page_wp .txt_brief {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
width: 800px;
|
||||
margin: 10px auto 0;
|
||||
font-weight: lighter
|
||||
}
|
||||
|
||||
.page_wp .img_box {
|
||||
position: absolute;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -540px 0 0 -960px;
|
||||
z-index: 3
|
||||
}
|
||||
|
||||
.page_wp .img_box img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.css3 .page_wp .img_box {
|
||||
display: none
|
||||
}
|
||||
|
||||
.page_1.hide {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.page_1.hide .txt_box {
|
||||
left: -9999px
|
||||
}
|
||||
|
||||
.page_1 .page_bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2500px;
|
||||
height: 1600px;
|
||||
margin: -800px 0 0 -1250px;
|
||||
transform-origin: center 708px;
|
||||
-webkit-transform-origin: center 708px
|
||||
}
|
||||
|
||||
.page_1 .page_bg:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../img/page1_bg.jpg?v=e0cf3019042982b9f77845806f575682) center center no-repeat;
|
||||
transform-origin: center 708px;
|
||||
-webkit-transform-origin: center 708px
|
||||
}
|
||||
|
||||
.page_4 .light_wp {
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
height: 460px;
|
||||
top: 50%;
|
||||
left: 15%;
|
||||
margin-top: -230px
|
||||
}
|
||||
|
||||
.page_4 .light_box {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: scale(.8);
|
||||
-webkit-transform: scale(.8)
|
||||
}
|
||||
|
||||
.page_4 .light_1 {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 0;
|
||||
width: 476px;
|
||||
height: 72px;
|
||||
margin-bottom: -18px;
|
||||
background: url(../img/light_2.png?v=242c3c618a2ad541082733414997ef2a)
|
||||
}
|
||||
|
||||
.page_4 .light_2,
|
||||
.page_4 .light_3,
|
||||
.page_4 .light_4 {
|
||||
position: absolute;
|
||||
width: 476px;
|
||||
height: 72px;
|
||||
background: url(../img/light_1.png?v=7c3e5e2e124547afaee7fcaaff70bd57);
|
||||
transform: scale(.8);
|
||||
-webkit-transform: scale(.8)
|
||||
}
|
||||
|
||||
.page_4 .light_2 {
|
||||
top: 0;
|
||||
left: 260px
|
||||
}
|
||||
|
||||
.page_4 .light_3 {
|
||||
bottom: 0;
|
||||
left: 190px
|
||||
}
|
||||
|
||||
.page_4 .light_4 {
|
||||
top: 50%;
|
||||
margin-top: -18px;
|
||||
right: 0
|
||||
}
|
||||
|
||||
.page_4 .light_5 {
|
||||
position: absolute;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
bottom: 50%;
|
||||
margin-bottom: -523px;
|
||||
left: -923px;
|
||||
background: url(../img/light_3.png?v=e6f2a0b5f72f53e91796633bd94794e3);
|
||||
transform: scale(.8);
|
||||
-webkit-transform: scale(.8)
|
||||
}
|
||||
|
||||
.page_4 .meteor_box {
|
||||
position: absolute;
|
||||
width: 576px;
|
||||
height: 401px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: url(../img/light_4.png?v=6e531d6fa8a77d81ac30c0db5a31e828)
|
||||
}
|
||||
|
||||
.star_wp {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: -9999px
|
||||
}
|
||||
|
||||
.star_wp.show {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.star_wp .star_bg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 2400px;
|
||||
height: 2000px;
|
||||
margin: -1000px 0 0 -1200px;
|
||||
background: url(../img/page3_bg.jpg?v=5c3d36e0fef268ebd524ae0dcb2c56f7) center center no-repeat;
|
||||
transform-origin: center center;
|
||||
-webkit-transform-origin: center center
|
||||
}
|
||||
|
||||
.star_wp .star_box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1740px;
|
||||
height: 1356px;
|
||||
margin: -678px 0 0 -870px;
|
||||
background: url(../img/star.png?v=8832ec2224c70d23f526dab0c25f42eb) center center no-repeat;
|
||||
transform-origin: center center;
|
||||
-webkit-transform-origin: center center
|
||||
}
|
||||
|
||||
#canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
pointer-events: none
|
||||
}
|
||||
|
||||
.btn_control,
|
||||
.btns_wp {
|
||||
z-index: 20;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.btn_control {
|
||||
top: 50%;
|
||||
right: 50px;
|
||||
margin-top: -42px
|
||||
}
|
||||
|
||||
.btn_control a {
|
||||
display: block;
|
||||
background: url(../img/btn_spr.png?v=161c5cde5cca472566aee1331226a3ad) -14px -52px no-repeat;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin: 0 0 12px
|
||||
}
|
||||
|
||||
.btn_control a.cur,
|
||||
.btn_control a:hover {
|
||||
background-position: 0 -52px
|
||||
}
|
||||
|
||||
.btns_wp {
|
||||
width: 100%;
|
||||
bottom: 70px
|
||||
}
|
||||
|
||||
.btn_download {
|
||||
display: block;
|
||||
margin: 26px auto 0;
|
||||
width: 156px;
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
border: 2px solid #fff;
|
||||
font-size: 18px;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.sys_footer {
|
||||
color: #524d45!important;
|
||||
min-width: 1000px;
|
||||
font-family: Arial, "\65B0\5B8B\4F53";
|
||||
position: absolute;
|
||||
bottom: 40px
|
||||
}
|
||||
|
||||
.foot .links a,
|
||||
.foot a {
|
||||
color: #524d45
|
||||
}
|
||||
|
||||
.page_1.show .page_bg {
|
||||
animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear;
|
||||
-webkit-animation: p1bg_effect1 300s both infinite linear, opc_effect .5s both linear
|
||||
}
|
||||
|
||||
@keyframes p1bg_effect1 {
|
||||
0% {
|
||||
transform: rotate(0) scale(1)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg) scale(4)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p1bg_effect1 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-360deg) scale(4)
|
||||
}
|
||||
}
|
||||
|
||||
.page_1.hide .page_bg:before {
|
||||
animation: p1bg_effect2 .4s both linear;
|
||||
-webkit-animation: p1bg_effect2 .4s both linear
|
||||
}
|
||||
|
||||
@keyframes p1bg_effect2 {
|
||||
0% {
|
||||
transform: rotate(0) scale(1);
|
||||
opacity: 1
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-100deg) scale(4);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p1bg_effect2 {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
opacity: 1
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(-100deg) scale(4);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.star_wp.show .star_bg {
|
||||
animation: opc_effect 2s both linear, p3bg_effect 30s both linear;
|
||||
-webkit-animation: opc_effect 2s both linear, p3bg_effect 30s both linear
|
||||
}
|
||||
|
||||
@keyframes p3bg_effect {
|
||||
0% {
|
||||
transform: rotate(0) scale(1)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(10deg) scale(1.2)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p3bg_effect {
|
||||
0% {
|
||||
-webkit-transform: rotate(0) scale(1)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(10deg) scale(1.2)
|
||||
}
|
||||
}
|
||||
|
||||
.star_wp.show .star_box {
|
||||
animation: p3star_effect 20s both linear;
|
||||
-webkit-animation: p3star_effect 20s both linear
|
||||
}
|
||||
|
||||
@keyframes p3star_effect {
|
||||
0% {
|
||||
transform: scale(0)
|
||||
}
|
||||
100% {
|
||||
transform: scale(.98)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p3star_effect {
|
||||
0% {
|
||||
-webkit-transform: scale(0)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(.98)
|
||||
}
|
||||
}
|
||||
|
||||
.page_4.show .light_wp {
|
||||
animation: p4light_effect 10s both linear infinite;
|
||||
-webkit-animation: p4light_effect 10s both linear infinite
|
||||
}
|
||||
|
||||
@keyframes p4light_effect {
|
||||
0% {
|
||||
transform: translate(5000px, 0)
|
||||
}
|
||||
10%,
|
||||
50% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
60% {
|
||||
transform: translate(-5000px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p4light_effect {
|
||||
0% {
|
||||
-webkit-transform: translate(5000px, 0)
|
||||
}
|
||||
10%,
|
||||
50% {
|
||||
-webkit-transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
60% {
|
||||
-webkit-transform: translate(-5000px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
.page_4.show .light_1,
|
||||
.page_4.show .light_3 {
|
||||
animation: p4light13_effect 10s both linear infinite;
|
||||
-webkit-animation: p4light13_effect 10s both linear infinite
|
||||
}
|
||||
|
||||
@keyframes p4light13_effect {
|
||||
0%,
|
||||
10% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
transform: translate(-50px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p4light13_effect {
|
||||
0%,
|
||||
10% {
|
||||
-webkit-transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
-webkit-transform: translate(-50px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
.page_4.show .light_2,
|
||||
.page_4.show .light_4 {
|
||||
animation: p4light24_effect 10s both linear infinite;
|
||||
-webkit-animation: p4light24_effect 10s both linear infinite
|
||||
}
|
||||
|
||||
@keyframes p4light24_effect {
|
||||
0%,
|
||||
10% {
|
||||
transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
transform: translate(-100px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p4light24_effect {
|
||||
0%,
|
||||
10% {
|
||||
-webkit-transform: translate(0, 0)
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
-webkit-transform: translate(-100px, 0)
|
||||
}
|
||||
}
|
||||
|
||||
.page_4.show .light_5 {
|
||||
animation: p4light5_effect 10s both linear infinite;
|
||||
-webkit-animation: p4light5_effect 10s both linear infinite
|
||||
}
|
||||
|
||||
@keyframes p4light5_effect {
|
||||
0%,
|
||||
10% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0
|
||||
}
|
||||
16%,
|
||||
28% {
|
||||
opacity: 1
|
||||
}
|
||||
22%,
|
||||
34% {
|
||||
opacity: 0
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
transform: translate(-50px, 0);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p4light5_effect {
|
||||
0%,
|
||||
10% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
opacity: 0
|
||||
}
|
||||
16%,
|
||||
28% {
|
||||
opacity: 1
|
||||
}
|
||||
22%,
|
||||
34% {
|
||||
opacity: 0
|
||||
}
|
||||
100%,
|
||||
50% {
|
||||
-webkit-transform: translate(-50px, 0);
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
.page_4.show .meteor_box {
|
||||
animation: p4meteor_effect 10s both linear infinite;
|
||||
-webkit-animation: p4meteor_effect 10s both linear infinite
|
||||
}
|
||||
|
||||
@keyframes p4meteor_effect {
|
||||
0%,
|
||||
65% {
|
||||
transform: translate(-1000px, 1000px)
|
||||
}
|
||||
100%,
|
||||
80% {
|
||||
transform: translate(1000px, -1000px)
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes p4meteor_effect {
|
||||
0%,
|
||||
65% {
|
||||
-webkit-transform: translate(-1000px, 1000px)
|
||||
}
|
||||
100%,
|
||||
80% {
|
||||
-webkit-transform: translate(1000px, -1000px)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opc_effect {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes opc_effect {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
100% {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.scale_box {
|
||||
transform-origin: center center;
|
||||
-webkit-transform-origin: center center
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1600px) {
|
||||
.scale_box {
|
||||
transform: scale(1);
|
||||
-webkit-transform: scale(1)
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1024px) and (max-width:1599px) {
|
||||
.scale_box {
|
||||
transform: scale(.875);
|
||||
-webkit-transform: scale(.875)
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1023px) {
|
||||
.scale_box {
|
||||
transform: scale(.7);
|
||||
-webkit-transform: scale(.7)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user