317 lines
18 KiB
CSS
Executable File
317 lines
18 KiB
CSS
Executable File
@charset "utf-8";
|
|
/* 8.0版本 */
|
|
|
|
.tw{display:block;width:1200px;margin:0 auto;overflow:hidden;}
|
|
.tw .picture img{display:block;margin:0 auto;}
|
|
/*左字有图*/
|
|
.s1 .character,.s4 .character,.s9 .character,.s13 .character{float:left;width:50%;text-align:left;margin-top:380px;transition:0.8s;opacity:0;transition-delay:0.8s;opacity:0;}
|
|
.s1.active .character,.s4.active .character,.s9.active .character,.s13.active .character{-webkit-animation:s8right 0.8s 1s forwards; animation:s8right 0.8s 1s forwards;}
|
|
.s9 .character{margin-top:360px;}
|
|
.s13 .character{margin-top:360px;}
|
|
|
|
.s1 .character h1,.s9 .character h1,.s13 .character h1{font-size:3.4rem;color:#fff;font-weight:bold;}
|
|
.s9 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon5.png) no-repeat;padding-left:80px;width:80%;margin-top:10px;height:60px;}
|
|
.s13 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon10.png) no-repeat;padding-left:80px;width:100%;margin-top:10px;height:60px;}
|
|
.s1 .character p,.s4 .character p,.s9 .character p,.s13 .character p{font-size:2rem;color:#fff;margin-top:30px;line-height:3.2rem;}
|
|
.s4 .character p b{font-size:2.4rem;color:#fff;}
|
|
.s1 .picture,.s4 .picture,.s9 .picture,.s13 .picture{float:right;width:48%;text-align:right;margin-top:240px;transition:0.8s;opacity:0;transition-delay:0.8s;opacity:0;}
|
|
.s1.active .picture,.s4.active .picture,.s9.active .picture,.s13.active .picture{-webkit-animation:s8left 0.8s 1s forwards; animation:s8left 0.8s 1s forwards;}
|
|
.s13 .picture{margin-top:240px;}
|
|
.s4 .picture{margin-top:200px;}
|
|
.s4 .character{margin-top:320px;}
|
|
.s9 .picture{margin-top:280px;}
|
|
.s1 .picture img{display:block;margin:0 auto;}
|
|
.s1 .character{margin-top:340px;}
|
|
.s1 .picture{margin-top:190px;}
|
|
@-webkit-keyframes s8right{
|
|
0%{opacity:0;-webkit-transform:translateX(100px);}
|
|
100%{opacity:1;-webkit-transform:translateX(0);}
|
|
}
|
|
@-moz-keyframes s8right{
|
|
0%{opacity:0;-moz-transform:translateX(100px);}
|
|
100%{opacity:1;-moz-transform:translateX(0);}
|
|
}
|
|
@-ms-keyframes s8right{
|
|
0%{opacity:0;-ms-transform:translateX(100px);}
|
|
100%{opacity:1;-ms-transform:translateX(0);}
|
|
}
|
|
@keyframes s8right{
|
|
0%{opacity:0;transform:translateX(100px);}
|
|
100%{opacity:1;transform:translateX(0);}
|
|
}
|
|
/**/
|
|
@-webkit-keyframes s8left{
|
|
0%{opacity:0;-webkit-transform:translateX(-100px);}
|
|
100%{opacity:1;-webkit-transform:translateX(0);}
|
|
}
|
|
@-moz-keyframes s8left{
|
|
0%{opacity:0;-moz-transform:translateX(-100px);}
|
|
100%{opacity:1;-moz-transform:translateX(0);}
|
|
}
|
|
@-ms-keyframes s8left{
|
|
0%{opacity:0;-ms-transform:translateX(-100px);}
|
|
100%{opacity:1;-ms-transform:translateX(0);}
|
|
}
|
|
@keyframes s8left{
|
|
0%{opacity:0;transform:translateX(-100px);}
|
|
100%{opacity:1;transform:translateX(0);}
|
|
}
|
|
|
|
|
|
|
|
.s2 .picture,.s8 .picture,.s12 .picture,.s14 .picture{float:left;width:40%;margin-top:280px;transition:0.8s;opacity:0;transition-delay:0.8s;}
|
|
.s2.active .picture,.s8.active .picture,.s12.active .picture,.s14.active .picture{-webkit-animation:bounceinT 0.8s 1s forwards; animation:bounceinT 0.8s 1s forwards;}
|
|
@-webkit-keyframes bouncein{
|
|
0%{opacity:0;-webkit-transform:scale(0.3);}
|
|
50%{opacity:0.5;-webkit-transform:scale(1.05);}
|
|
70%{opacity:0.8;-webkit-transform:scale(0.9);}
|
|
100%{-webkit-transform:scale(1);opacity:1;}
|
|
}
|
|
@-moz-keyframes bouncein{
|
|
0%{opacity:0;-moz-transform:scale(0.3);}
|
|
50%{opacity:0.5;-moz-transform:scale(1.05);}
|
|
70%{-moz-transform:scale(0.9);opacity:0.8;}
|
|
100%{-moz-transform:scale(1);opacity:1;}
|
|
}
|
|
@-ms-keyframes bouncein{
|
|
0%{opacity:0;-ms-transform:scale(0.3);}
|
|
50%{opacity:0.5;-ms-transform:scale(1.05);}
|
|
70%{-ms-transform:scale(0.9);opacity:0.8;}
|
|
100%{-ms-transform:scale(1);opacity:1;}
|
|
}
|
|
@keyframes bouncein{
|
|
0%{opacity:0;transform:scale(0.3);}
|
|
50%{opacity:0.5;transform:scale(1.05);}
|
|
70%{transform:scale(0.9);opacity:0.8;}
|
|
100%{transform:scale(1);opacity:1;}
|
|
}
|
|
/* 弹入-从上 */
|
|
@-webkit-keyframes bounceinT{
|
|
0%{opacity:0;-webkit-transform:translateY(-100px);}
|
|
60%{opacity:0.5;-webkit-transform:translateY(30px);}
|
|
80%{-webkit-transform:translateY(-10px);opacity:0.8;}
|
|
100%{-webkit-transform:translateY(0);opacity:1;}
|
|
}
|
|
@-moz-keyframes bounceinT{
|
|
0%{opacity:0;-moz-transform:translateY(-100px);}
|
|
60%{opacity:0.5;-moz-transform:translateY(30px);}
|
|
80%{-moz-transform:translateY(-10px);opacity:0.8;}
|
|
100%{-moz-transform:translateY(0);opacity:1;}
|
|
}
|
|
@-ms-keyframes bounceinT{
|
|
0%{opacity:0;-ms-transform:translateY(-100px);}
|
|
60%{opacity:0.5;-ms-transform:translateY(30px);}
|
|
80%{-ms-transform:translateY(-10px);opacity:0.8;}
|
|
100%{-ms-transform:translateY(0);opacity:1;}
|
|
}
|
|
@keyframes bounceinT{
|
|
0%{opacity:0;transform:translateY(-100px);}
|
|
60%{opacity:0.5;transform:translateY(30px);}
|
|
80%{transform:translateY(-10px);opacity:0.8;}
|
|
100%{transform:translateY(0);opacity:1;}
|
|
}
|
|
|
|
|
|
.s8 .picture{margin-top:300px;}
|
|
.s2 .character,.s8 .character,.s12 .character,.s14 .character{float:right;width:54%;margin-top:280px;transition:0.8s;opacity:0;transition-delay:0.8s;}
|
|
.s2.active .character,.s8.active .character,.s12.active .character,.s14.active .character{-webkit-animation:bouncein 0.8s 1s forwards; animation:bouncein 0.8s 1s forwards;}
|
|
.s8 .character{width:46%;margin-top:360px;}
|
|
.s2 .character h1,.s8 .character h1,.s12 .character h1,.s14 .character h1{font-size:3.2rem;color:#fff;font-weight:bold;}
|
|
.s8 .character h1,.s12 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon4.png) no-repeat;padding-left:80px;width:80%;margin-top:10px;height:60px;}
|
|
.s12 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon9.png) no-repeat;}
|
|
.s14 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon11.png) no-repeat;padding-left:80px;width:80%;margin-top:10px;height:60px;}
|
|
.s12 .character h1{width:100%;}
|
|
.s14 .picture{margin-top:280px;}
|
|
.s14 .character{width:48%;margin-top:360px;}
|
|
.s12 .character{margin-top:360px;}
|
|
.s12 .picture{margin-top:360px;}
|
|
.s12 .picture img{width:500px;}
|
|
.s2 .character p,.s8 .character p,.s12 .character p,.s14 .character p{font-size:2rem;color:#fff;margin-top:30px;line-height:3.2rem;}
|
|
.s2 .character h2{font-size:2.6rem;color:#fff;font-weight:bold;margin-top:30px;}
|
|
.s2 .character{margin-top:240px;}
|
|
.s2 .picture{margin-top:260px;}
|
|
|
|
.s3 .picture{width:80%;margin:0 auto;margin-top:200px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1400px);-webkit-transform:translateY(-1400px)}
|
|
.s3.active .picture{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.s3 .character{margin-top:40px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(1000px);-webkit-transform:translateY(1000px);}
|
|
.s3.active .character{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.s3 .character h1,.s5 .character h1{font-size:3.4rem;color:#fff;text-align:center;margin-bottom:30px;font-weight:bold;}
|
|
.s5 .character h1{margin-top:120px;margin-bottom:0;}
|
|
.s5 .picture,.s6 .picture,.s7 .picture,.s10 .picture,.s11 .picture,.s15 .picture{margin:0 auto;opacity:0;transition-delay:1s;transition:1s;transform:translateY(1000px);-webkit-transform:translateY(1000px);}
|
|
.s5.active .picture,.s6.active .picture,.s7.active .picture,.s10.active .picture,.s11.active .picture,.s15.active .picture{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.s5 .character,.s6 .character,.s7 .character,.s10 .character,.s11 .character,.s15 .character{opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1400px);-webkit-transform:translateY(-1400px)}
|
|
.s5.active .character,.s6.active .character,.s7.active .character,.s10.active .character,.s11.active .character,.s15.active .character{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
|
|
.s11 .character{margin-top:160px;}
|
|
.s6 .character{margin-top:100px;}
|
|
.s10 .character span{transition:1s; transition-delay:0.8s;opacity:0;}
|
|
.s6 .character span{background:url(../../resource/images/single/keyboard/keyboardicon.png) no-repeat;display:block;width:300px;margin:0 auto;height:90px;transition:1s; transition-delay:0.8s;opacity:0;}
|
|
.s6.active .character span,.s10.active .character span{-webkit-animation:shake 0.8s 1s forwards; animation:shake 0.8s 1s forwards;opacity:1;}
|
|
@-webkit-keyframes shake{
|
|
0%,100%{-webkit-transform:translateX(0);}
|
|
10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
|
|
20%,40%,60%,80%{-webkit-transform:translateX(10px);}
|
|
}
|
|
@-moz-keyframes shake{
|
|
0%,100%{-moz-transform:translateX(0);}
|
|
10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);}
|
|
20%,40%,60%,80%{-moz-transform:translateX(10px);}
|
|
}
|
|
@-ms-keyframes shake{
|
|
0%,100%{-ms-transform:translateX(0);}
|
|
10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);}
|
|
20%,40%,60%,80%{-ms-transform:translateX(10px);}
|
|
}
|
|
@keyframes shake{
|
|
0%,100%{transform:translateX(0);}
|
|
10%,30%,50%,70%,90%{transform:translateX(-10px);}
|
|
20%,40%,60%,80%{transform:translateX(10px);}
|
|
}
|
|
.s6 .character h1,.s10 .character h1{font-size:3.2rem;color:#fff;font-weight:bold;background:url(../../resource/images/single/keyboard/keyboardicon2.png) no-repeat;padding-left:80px;margin:0 auto;width:30%;margin-top:10px;}
|
|
.s10 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon7.png) no-repeat;}
|
|
.s6 .character p,.s7 .character p,.s10 .character p,.s11 .character p{font-size:2rem;color:#fff;margin-top:20px;text-align:center;}
|
|
.s6 .picture{margin:0 auto;width:80%;margin-top:30px;}
|
|
|
|
.s7 .character{margin-top:160px;}
|
|
.s7 .character h1,.s11 .character h1{font-size:3.2rem;color:#fff;font-weight:bold;background:url(../../resource/images/single/keyboard/keyboardicon3.png) no-repeat;padding-left:80px;margin:0 auto;width:40%;margin-top:10px;transition:1s; transition-delay:0.8s;opacity:0;}
|
|
.s11 .character h1{background:url(../../resource/images/single/keyboard/keyboardicon8.png) no-repeat;}
|
|
.s7.active .character h1,.s11.active .character h1{-webkit-animation:shake 0.8s 1s forwards; animation:shake 0.8s 1s forwards;opacity:1;}
|
|
.s11 .character h1{width:50%;margin:0 auto;}
|
|
.s7 .character p{margin-top:30px;}
|
|
.s7 .picture{margin:0 auto;width:100%;margin-top:70px;}
|
|
.s10 .character{margin-top:120px;}
|
|
.s10 .character span{background:url(../../resource/images/single/keyboard/keyboardicon6.png) no-repeat;display:block;width:300px;margin:0 auto;height:90px;}
|
|
.s10 .picture{margin-top:60px;}
|
|
.s11 .character{margin-top:160px;}
|
|
.s11 .character p{line-height:3.4rem;}
|
|
.s11 .picture{margin-top:40px;}
|
|
.s15 .character{margin-top:160px;}
|
|
.s15 .character h1{font-size:3.2rem;color:#fff;font-weight:bold;text-align:center;margin-top:10px;}
|
|
.s15 .picture{width:90%;margin:0 auto;margin-top:20px;}
|
|
.s15 .picture img{width:1000px;}
|
|
.s7 .character h1, .s11 .character h1{height:54px;line-height:54px;}
|
|
|
|
/* 最后一页 */
|
|
.s16 .sixteen h1{display:block;font-size:80px;color:#fff;font-weight:bold;text-align:center;margin-top:350px;opacity:0;transition-delay:1s;transition:1s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
|
|
.s16.active .sixteen h1{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.section .sixteen h1{font-size:100px;color:#fff;text-align:center;margin-top:350px;opacity:0;transition-delay:1s;transition:1.2s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
|
|
.s16.active h1{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.s16 .sixteen p{display:block;text-align:center;font-size:40px;color:#fff;margin-top:40px;
|
|
opacity:0;transition-delay:1s;transition:1.2s;transform:translateY(-1000px);-webkit-transform:translateY(-1000px);}
|
|
.s16.active .sixteen p{opacity:1;transform:translateY(0px);-webkit-transform:translateY(0px);}
|
|
.s16 .sixteen p{font-size:60px;color:#fff;font-weight:bold;text-align:center}
|
|
.s6 .character h1, .s10 .character h1{height:54px;}
|
|
|
|
/*加入微三云*/
|
|
.seventeenth h1{font-size:100px;font-family: "Microsoft YaHei";color: rgb(189, 125, 2);font-weight:bold;text-shadow: 2.5px 4.33px 0px rgba(0, 0, 0, 0.09);text-align:center;position:relative;top:50%;margin-top:-180px;}
|
|
.jiameng{display:block;overflow:hidden;position:relative;left:50%;top:0;margin-left:-384px;margin-top:110px;}
|
|
.jiameng a.w-scene-btn{display:block;float:left;width:320px;height:70px;line-height:70px;text-align:center;font-size:36px;border-radius:5px;margin:0 30px;color:#fff;}
|
|
.jiameng a.btn1:hover{border:2px solid #0d64f7;background:#0d64f7;}
|
|
.jiameng a.btn2:hover{border:2px solid #0d64f7;background:#0d64f7;}
|
|
.jiameng .btn1{background:#578fee;border:2px solid #3976dc;opacity:0;transition-delay:1s;transition:1.5s;transform:translateX(190px);-webkit-transform:translateX(190px);}
|
|
.s16.active .jiameng .btn1{opacity:1;transform:translateX(0px);-webkit-transform:translateX(0px);}
|
|
.jiameng .btn2{background:#578fee;border:2px solid #3976dc;opacity:0;transition-delay:1s;transition:1.5s;transform:translateX(-190px);-webkit-transform:translateX(-190px);}
|
|
.s16.active .jiameng .btn2{opacity:1;transform:translateX(0px);-webkit-transform:translateX(0px);}
|
|
|
|
.scrolldown{display:block;width:32px;height:35px;background:url(../../resource/images/jiantou.png) no-repeat;position:fixed;left:50%;bottom:10px;margin-left:-16px;cursor:pointer;animation:mymove 0.8s infinite;-webkit-animation:mymove 0.8s infinite;}
|
|
|
|
@keyframes mymove{
|
|
from {opacity:0;bottom:20px}
|
|
to {opacity:1;bottom:10px;}
|
|
}
|
|
|
|
@-webkit-keyframes mymove {
|
|
from {opacity:0;bottom:20px}
|
|
to {opacity:1;bottom:10px;}
|
|
}
|
|
|
|
@media screen and (max-width:1440px){
|
|
.tw{width:1100px;}
|
|
.s1 .picture{margin-top:140px;}
|
|
.s1 .character{margin-top:240px;}
|
|
.s1 .character h1, .s9 .character h1, .s13 .character h1,.s2 .character h1, .s8 .character h1, .s12 .character h1, .s14 .character h1,.s3 .character h1, .s5 .character h1,.s6 .character h1, .s10 .character h1,.s7 .character h1, .s11 .character h1,.s15 .character h1{font-size:2rem;}
|
|
.s1 .character p, .s4 .character p, .s9 .character p, .s13 .character p,.s2 .character p, .s8 .character p, .s12 .character p, .s14 .character p,.s6 .character p, .s7 .character p, .s10 .character p, .s11 .character p{font-size:1.4rem;line-height:2.2rem;margin-top:20px;}
|
|
.s2 .character h2,.s4 .character p b{font-size:1.8rem;margin-top:20px;}
|
|
.s2 .picture{margin-top:200px;}
|
|
.s4 .picture img{width:450px;}
|
|
.s3 .character h1{margin-bottom:20px;}
|
|
.s11 .character h1,.s6 .character h1, .s10 .character h1,.s7 .character h1, .s11 .character h1,.s8 .character h1, .s12 .character h1,.s9 .character h1,.s13 .character h1,.s14 .character h1{height:56px;background-size:10%;line-height:54px;padding-left:60px;}
|
|
.s5 .character{margin-top:100px;}
|
|
.s2 .character{margin-top:280px;}
|
|
.s6 .character,.s7 .character h1,.s8 .character h1,.s9 .character h1,.s10 .character h1{height:36px;line-height:30px;padding-left:48px;}
|
|
.s1 .picture img{width:320px;}
|
|
.s2 .picture img,.s13 .picture img{width:400px;}
|
|
.s5 .picture img{width:550px;}
|
|
.s3 .picture img{width:800px;}
|
|
.s6 .character span,.s10 .character span{background-size:80%;}
|
|
.s12 .character h1{padding-left:70px;}
|
|
.s7 .picture img{width:900px;}
|
|
.s8 .picture img,.s9 .picture img{width:500px;}
|
|
.s8 .picture,.s12 .picture{margin-top:280px;}
|
|
.s6 .picture img{width:550px;}
|
|
.s9 .picture{margin-top:240px;}
|
|
.s6 .character h1, .s10 .character h1{margin-top:0;}
|
|
.s7 .character{margin-top:120px;}
|
|
.s8 .character{margin-top:330px;}
|
|
.s9 .character{margin-top:340px;}
|
|
.s13 .picture{margin-top:240px;}
|
|
.s6 .character p, .s7 .character p, .s10 .character p, .s11 .character p{margin-top:10px;}
|
|
.s10 .picture,.s11 .picture{margin-top:20px;}
|
|
.s12 .character,.s14 .character{margin-top:320px;}
|
|
.s13 .character{margin-top:340px;}
|
|
.s14 .picture img{width:450px;}
|
|
.s14 .picture{margin-top:240px;}
|
|
.s10 .picture img,.s11 .picture img{width:800px;}
|
|
.s11 .character{margin-top:150px;}
|
|
.s15 .character{margin-top:150px;}
|
|
.s15 .picture{margin-top:0;}
|
|
.s15 .picture img{width:800px;}
|
|
.s8 .picture, .s12 .picture{margin-top:240px;}
|
|
|
|
.jiameng{margin-left:-320px;}
|
|
.section .seventeen h1{font-size:70px;}
|
|
.jiameng a.w-scene-btn{width:260px;}
|
|
.jiameng{margin-top:100px;}
|
|
.section .sixteen h1{margin-top:200px;}
|
|
}
|
|
|
|
@media screen and (max-width:1366px){
|
|
.tw{width:960px;}
|
|
.s1 .character p, .s4 .character p, .s9 .character p, .s13 .character p, .s2 .character p, .s8 .character p, .s12 .character p, .s14 .character p, .s6 .character p, .s7 .character p, .s10 .character p, .s11 .character p{font-size:1.4rem;line-height:2.4rem;margin-top:10px;}
|
|
.s1 .character{margin-top:240px;}
|
|
.s1 .picture{margin-top:140px;}
|
|
.s3 .picture{margin-top:100px;}
|
|
.s4 .character{margin-top:220px;}
|
|
.s1 .picture img{width:260px;}
|
|
.s4 .picture img{width:340px;}
|
|
.s4 .picture{margin-top:180px;}
|
|
.s5 .picture img,.s12 .picture img{width:420px;}
|
|
|
|
.s6 .character span, .s10 .character span{background-size:66%;height:60px;}
|
|
.s11 .character h1, .s6 .character h1, .s10 .character h1, .s7 .character h1, .s11 .character h1, .s8 .character h1, .s12 .character h1, .s9 .character h1, .s13 .character h1, .s14 .character h1{line-height:28px;height:32px;}
|
|
.s2 .picture img, .s13 .picture img{width:360px;}
|
|
.s2 .picture{margin-top:160px;}
|
|
.s2 .character{margin-top:180px;}
|
|
.s6 .character{margin-top:100px;}
|
|
.s6 .picture img{width:410px;}
|
|
.s7 .picture img{width:700px;}
|
|
.s8 .picture img, .s9 .picture img{width:380px;}
|
|
.s8 .character{margin-top:300px;}
|
|
.s10 .picture img, .s11 .picture img{width:640px;}
|
|
.s11 .character h1{width:40%;}
|
|
.s12 .character h1,.s13 .character h1{height:40px;line-height:40px;}
|
|
.jiameng{margin-top:90px;}
|
|
.s14 .picture img{width:380px;}
|
|
.section .seventeen h1{font-size:60px;}
|
|
.jiameng a.w-scene-btn{width:260px;}
|
|
.section .sixteen h1{margin-top:100px;}
|
|
.s6 .picture,.s11 .character{margin-top:100px;}
|
|
.s7 .picture{margin-top:40px;}
|
|
.s9 .picture,.s14 .picture{margin-top:180px;}
|
|
.s12 .character, .s14 .character{margin-top:220px;}
|
|
.s13 .character{margin-top:260px;}
|
|
.s13 .picture{margin-top:160px;}
|
|
.s9 .character{margin-top:280px;}
|
|
.s15 .character{margin-top:100px;}
|
|
.s15 .picture img{width:650px;}
|
|
} |