记录一下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
http://down2.uc.cn/ucbrowser/v2/platform/android.php
<style>
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
list-style: none;
}
body {
font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif";
-webkit-text-size-adjust:100%;
background: #fff;
color: #666;
-webkit-font-smoothing:antialiased;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/*clear*/
.cf:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
a{
color: #666;
text-decoration: none;
}
.mybtn{
position: absolute;
top: 78%;
left: 50%;
margin: 0 0 0 -65px;
130px;
z-index: 90;
}
.mybtn a {
display: block;
}
.appstore{
margin-bottom: 10px;
padding: 3px 0 3px 39px;
height: 34px;
font-size: 12px;
line-height: 18px;
color: #fff;
border-radius: 3px;
background: #000 url(../images/appstore.png) no-repeat 10px 7px;
background-size: 21px 26px;
}
.appstore strong{
display: block;
font-size: 17px;
}
.crack{
margin: 0 20px;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #686868;
}
.active{
position: absolute;
top: 0;
right:0;
z-index: 100;
display: block;
102px;
height: 84px;
background: url(../images/active.png) no-repeat 0 0;
background-size: 102px 84px;
overflow: hidden;
}
a.active-link{
position: absolute;
top: 15px;
left: 27px;
display: block;
86px;
height: 30px;
color: #fff;
text-align: center;
-webkit-transform: rotate(37deg);
}
.active-link h4{
font-size: 10px;
margin-top: -10px;
}
.active-link h3{
font-size: 12px;
font-family: 微软雅黑;
}
.slide li:before{
position: absolute;
bottom: 5px;
left: 50%;
content: '';
display: block;
26px;
height: 18px;
margin-left: -13px;
background-image: url(../images/arrow_other.png);
background-size: 26px 18px;
-webkit-animation: shake 1s ease-in-out infinite normal;
}
@-webkit-keyframes shake{
0% {-webkit-transform: translate(0,0);}
25% {-webkit-transform: translate(0,-10px);}
50% {-webkit-transform: translate(0,0);}
70% {-webkit-transform: translate(0px,-5px);}
100% {-webkit-transform: translate(0,0);}
}
.slide li:last-child:before{
display: none;
}
/*slide-start*/
.slide{
position: relative;
overflow: hidden;
}
.slide ul{
100%;
height: 100%;
z-index: 1;
overflow: hidden;
background-size: 320px;
}
.slide li{
position: absolute;
left: 0;
top: 0;
100%;
background: -webkit-radial-gradient(39% 77%,ellipse, #fff, #fff 50%, #edefff 70%);
background-size: 130% 120%;
-webkit-transition: transform .3s ease-in-out;
opacity: 0;
}
.slide .slide-img{
position: absolute;
top: 50%;
left: 12px;
margin-top: -44px;
}
.slide .slide-title{
position: absolute;
top: 27px;
left: 91px;
color: #01a8f2;
}
.slide .slide-text{
position: absolute;
top: 48px;
left: 91px;
font-size: 10px;
line-height: 21px;
}
.slide-point{
position: absolute;
top: 50%;
right: 16px;
margin: -50px 0 0 0;
display: none;
9px;
text-align: center;
font-size: 0;
z-index: 90;
-webkit-animation: dis-show 0s ease forwards;
}
.slide-point span{
margin: 6px auto;
4px;
height: 4px;
border-radius: 50%;
background: #c8e3f9;
display: block;
z-index: 100;
}
.slide-point span.current{
margin: 6px auto;
background: #8fcbfb;
z-index: 100;
}
.slide-point span:first-child{
8px;
height: 8px;
margin: 4px auto;
background: url(../images/icon_home.png) no-repeat 50%;
background-size: 8px;
}
/*slide-end*/
/*分屏*/
h1{
position: absolute;
top: 10%;
left: 0;
100%;
font-size: 29px;
font-weight: 400;
color: #3095ef;
text-align: center;
}
h1 em{
display: block;
text-align: center;
font-size: 15px;
font-style: normal;
color: #686868;
line-height: 24px;
}
.slide p{
position: absolute;
}
.slide p img{
100%;
}
/*page0 begin*/
.item0-0{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
90px;
height: 90px;
background:url(../images/0/item0_0.png) no-repeat 0 16px,-webkit-gradient(linear, left top, left bottom, from(rgb(28,135,255)), to(rgb(75, 219, 255)));
background-size:83px auto,100% auto;
border-radius: 50%;
opacity: 0;
-webkit-transform:scale(.9);
-webkit-animation: none;
}
.play .item0-0{
-webkit-transition: all 1s ease-in-out;
opacity: 1;
-webkit-transform:scale(1);
-webkit-animation: item0-0-ac 4s ease-in-out infinite alternate;
}
@-webkit-keyframes item0-0-ac{
0%{
-webkit-transform: translate3d( 2px ,2px , 0);
}
25%{
-webkit-transform: translate3d( 2px ,0 , 0);
}
50%{
-webkit-transform: translate3d( 0 ,2px , 0);
}
75%{
-webkit-transform: translate3d( 0 ,-2px , 0);
}
100% {
-webkit-transform: translate3d( -2px ,-2px , 0);
}
}
.play .item0-1{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffe438), to(#ff8823));
border-radius: 50%;
opacity: 0;
webkit-transition: opacity 5s ease-in-out;
-webkit-animation: circleRotate 3s .9s ease-in-out both infinite alternate;
-webkit-transform-origin: 40px 48px;
}
@-webkit-keyframes circleRotate{
0%{
-webkit-transform : rotate(0deg);
}
1%{
opacity: 1;
}
100%{
-webkit-transform : rotate(360deg);
opacity: 1;
}
}
.play .item0-2{
top: 47%;
left: 50%;
margin: 33px 0 0 -45px;
89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa049), to(#ff6095));
border-radius: 50%;
opacity: 0;
-webkit-animation: circleRotate 4s 1.5s ease-in-out both infinite alternate;;
-webkit-transform-origin: 45px 37px;
}
.play .item0-3{
top: 47%;
left: 50%;
margin: 34px 0 0 -44px;
89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#52f5e4), to(#00ccb1));
border-radius: 50%;
opacity: 0;
-webkit-animation: circleRotate 5s 2s ease-in-out both infinite alternate;;
-webkit-transform-origin: 45px 50px;
}
.item0-4{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-4{
top: 47%;
left: 50%;
margin: 97px 0 0 -92px;
17px;
height: 17px;
background:-webkit-gradient(linear, left top, left bottom, from(#46b0ff), to(#46b0ff));
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 5.3s 1s ease-in-out infinite alternate;
}
.item0-5{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-5{
top: 41%;
left: 50%;
margin: 80px 0 0 53px;
24px;
height: 24px;
background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb));
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 5s .9s ease-in-out infinite alternate ;
}
.item0-6{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-6{
top: 50%;
left: 50%;
10px;
height: 10px;
margin: 101px 0 0 49px;
background:#ff6b88;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 6s 1.1s ease-in-out infinite alternate;
}
.item0-7{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-7{
top: 50%;
left: 50%;
7px;
height: 7px;
margin: 75px 0 0 85px;
background:#8b92ff;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 4s 1.1s ease-in-out infinite alternate;
}
.item0-8{
opacity: 0;
-webkit-transition: opacity 2.5s ease 1s;
}
.play .item0-8{
top: 50%;
left: 50%;
margin: 54px 0 0 -85px;;
7px;
height: 7px;
background: #ffdc36;
border-radius: 50%;
opacity: 1;
-webkit-animation: shock 4.3s .6s ease-in-out infinite alternate;
}
@-webkit-keyframes shock{
0%{
-webkit-transform : translate3d(0 , 0 , 0);
}
30%{
-webkit-transform : translate3d(10px , 10px , 0);
}
60%{
-webkit-transform : translate3d(8px , 14px , 0);
}
100%{
-webkit-transform : translate3d(6px , 9px , 0);
}
}
/*page0 end*/
/*page1 start*/
.play .item1-1,
.play .item1-7{
top: 58%;
left: 50%;
margin: 0 0 0 -135px;
271px;
height: 54px;
background: url(../images/1/item7_1.png) no-repeat 50% 0;
background-size: 271px;
-webkit-animation: skin_phone .8s .2s both;
}
.play .item1-7{
background-image: url(../images/1/item7_7.png);
}
.item1-2,
.item1-3,
.item1-4,
.item1-5{
top: 58%;
left: 50%;
53px;
height: 53px;
line-height: 53px;
text-align: center;
color: #fff;
border-radius: 50%;
font-family: 'Microsoft Yahei';
font-size: 15px;
}
.item1-2{
margin: -31px 0px 0 -86px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffbb04), to(#ff903c));
opacity: 0;
}
.play .item1-2{
-webkit-transition: all .7s 1s ease-out;
-webkit-animation: scaleOut .3s 2.9s ease-out both;
opacity: 1;
margin: -56px 0px 0 -86px;
}
.item1-2:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
}
.play .item1-2:after{
-webkit-transition: all .5s ease 3s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-3{
margin: -15px 0px 0 27px;
background:-webkit-gradient(linear, left top, left bottom, from(#adf237), to(#2dd9b9));
opacity: 0;
}
.play .item1-3{
-webkit-transition: all .7s 1s ease-out;
-webkit-animation: scaleOut .3s 2.6s ease-out both;
opacity: 1;
margin: -40px 0px 0 27px;
}
.item1-3:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
opacity: 0;
-webkit-transform : scale(.1);
}
.play .item1-3:after{
-webkit-transition: all .5s ease 2.6s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-4{
margin: -135px 0px 0 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#439cff), to(#76daff));
opacity: 0;
}
.play .item1-4{
-webkit-transition: all .5s 1s ease-out;
-webkit-animation: scaleOut .3s 2s ease-out both;
opacity: 1;
margin: -145px 0px 0 46px;
}
.item1-4:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
opacity: 0;
-webkit-transform : scale(.1);
}
.play .item1-4:after{
-webkit-transition: all .5s ease 1.8s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-5{
margin: -140px 0px 0 -76px;
background:-webkit-gradient(linear, left top, left bottom, from(#9967fa), to(#fb85d5));
opacity: 0;
}
.play .item1-5 {
-webkit-transition: all .5s 1s ease-out;
opacity: 1;
margin: -156px 0px 0 -76px;
-webkit-animation: scaleOut .3s 1.7s ease-out both;
}
@-webkit-keyframes scaleOut{
0%{
-webkit-transform: scale(1);
}
50%{
-webkit-transform: scale(1.2);
}
100%{
-webkit-transform: scale(1);
}
}
.item1-5:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
opacity: 0;
}
.play .item1-5:after{
-webkit-transition: all .5s ease 1.7s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-6{
top: 50%;
left: 50%;
62px;
height: 62px;
border-radius: 50%;
text-align: center;
line-height: 62px;
margin: -47px 0px 0 -23px;
font-family: 'Microsoft Yahei';
color: #fff;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
opacity: 0;
}
.play .item1-6{
-webkit-transition: all .9s 1s ease-out;
opacity: 1;
margin: -57px 0px 0 -23px;
-webkit-animation: scaleOut .3s 2.3s ease-out both;
}
.item1-6:after{
position: absolute;
right: 0;
bottom: -9px;
content: "";
display: block;
27px;
height: 24px;
background: url(../images/1/tick.png);
background-size: 27px 24px;
-webkit-transform : scale(.1);
}
.play .item1-6:after{
-webkit-transition: all .5s ease 2.3s;
opacity: 1;
-webkit-transform : scale(1);
}
.item1-8{
top: 50%;
left: 50%;
13px;
height: 13px;
border-radius: 50%;
text-align: center;
margin: -5px 0px 0 54px;
background:-webkit-gradient(linear, left top, left bottom, from(#fc4f8b), to(#fda14d));
opacity: 0;
}
.play .item1-8{
-webkit-transition: all .5s 1.8s ease-out;
-webkit-animation: gradientOut 1s .8s ease-out both;
opacity: 1;
-webkit-transform: translateY(-15px);
}
.item1-9{
top: 50%;
left: 50%;
9px;
height: 9px;
border-radius: 50%;
text-align: center;
margin: -115px 0px 0 -15px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffc322), to(#ff9e53));
opacity: 0;
}
.play .item1-9{
-webkit-transition: all .5s 1.8s ease-out;
-webkit-animation: gradientOut 1s .8s ease-out both;
opacity: 1;
-webkit-transform: translateY(-15px);
}
.item1-10{
position: absolute;
left: 50%;
top: 5%;
174px;
height: 60px;
background: url(../images/1/read.png);
background-size: 174px 60px;
margin: 0 0 0 -87px;
}
/*page1 end*/
/*page2 begin*/
.screen2-1{
position: absolute;
top: 50%;
left: 50%;
48px;
height: 48px;
margin: -24px 0 0 -24px;
border-radius: 50%;
transform: scale(1);
background: -webkit-gradient(linear, left top, left bottom, from(#6fd7ff), to(#439cff));
opacity: 0;
}
.play .screen2-1{
-webkit-animation: screen2-1 1.4s ease .1s forwards;
}
@-webkit-keyframes screen2-1{
0%{
-webkit-transform: scale(0);
opacity: 0;
}
30%{
-webkit-transform: scale(1);
opacity: 1;
}
70%{
-webkit-transform: scale(1);
opacity: 1;
}
100%{
-webkit-transform: scale(0);
opacity: 0;
}
}
.screen2-2{
position: absolute;
left: 50%;
top: 50%;
35px;
margin: -18px 0 0 -17px;
}
.play .screen2-2{
-webkit-animation: screen2-2 1s linear .2s forwards;
-webkit-transform: origin(22px 20px);
}
@-webkit-keyframes screen2-2{
0%{
-webkit-transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(400deg);
}
}
.screen2-3{
position: absolute;
top: 50%;
left: 50%;
margin: -47px 0 0 -47px;
95px;
opacity: 0;
-webkit-transform: scale(0);
}
.play .screen2-3{
-webkit-transition: all .6s ease 1s;
-webkit-transform: scale(1);
opacity: 1;
}
.screen2-4,.screen2-5,.screen2-6,.screen2-7,.screen2-8,.screen2-9{
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -28px 0 0 -28px;
opacity: 0;
}
.screen2-4{
56px;
height: 57px;
background: url(../images/2/pop.png);
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-4{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( 60px ,-60px ,0) scale(1);;
}
.screen2-5{
61px;
height: 61px;
background: url(../images/2/pop.png) -58px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-5{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( -80px ,80px ,0) scale(1);;
}
.screen2-6{
display: block;
57px;
height: 57px;
background: url(../images/2/pop.png) -120px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-6{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( -45px ,-45px ,0) scale(1);;
}
.screen2-7{
display: block;
46px;
height: 46px;
background: url(../images/2/pop.png) -404px 0;
background-size: 225px 61px;
opacity: 0;
-webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}
.play .screen2-7{
-webkit-transition: all .4s ease 1.2s;
opacity: 1;
-webkit-transform: translate3d( 70px ,70px ,0) scale(1);;
}
.screen2-8{
display: block;
13px;
height: 13px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#ffb321), to(#fc7f39));
opacity: 0;
-webkit-transform: translate3d( 30px,-10px ,0) scale(0);
}
.play .screen2-8{
-webkit-transition: all .5s ease 1.4s;
opacity: 1;
-webkit-transform: translate3d( 80px ,35px ,0) scale(1);;
}
.screen2-9{
display: block;
13px;
height: 13px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#9c6bfa), to(#fb88d6));
opacity: 0;
-webkit-transform: translate3d( 10px,-10px ,0) scale(0);
}
.play .screen2-9{
-webkit-transition: all .5s ease 1.4s;
opacity: 1;
-webkit-transform: translate3d( -10px ,-80px ,0) scale(1);;
}
.screen2-10{
position: absolute;
top: 5%;
left: 50%;
190px;
height: 59px;
background: url(../images/2/5000w.png);
background-size: 190px 59px;
margin: 0 0 0 -85px;
}
/*page2 end*/
/*page3 start*/
.play .item2-1{
top: 36%;
left: 50%;
margin: 0 0 0 -83px;
31px;
height: 31px;
background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 1.3s ease-in-out both;
}
.play .item2-2{
top: 31%;
left: 50%;
margin: 0 0 0 38px;
46px;
height: 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 2.0s ease-in-out both;
}
.play .item2-3{
top: 52%;
left: 50%;
44px;
height: 44px;
background:url(../images/2/item2_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(rgba(28,135,255,0.9)), to(rgba(75, 219, 255,0.9)));
background-size:23px auto,100% auto;
border-radius: 50%;
-webkit-animation: item2-3-ac 1.6s .1s ease-in-out both;
}
@-webkit-keyframes item2-3-ac{
0%{opacity: 0;-webkit-transform:translate3d(-22px,-144px, 0);}
20% { opacity: 1;-webkit-transform:translate3d(-22px,60px, 0);}
30% { opacity: 1;-webkit-transform:translate3d(-22px,-44px, 0);}
45% { opacity: 0;-webkit-transform:translate3d(-22px,-44px, 0) scale(1.6);}
46% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);}
99% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);}
100% { opacity: 1;-webkit-transform:translate3d(44px,0px, 0);}
}
.play .item2-4{
top: 58%;
left: 50%;
margin: 0 0 0 -105px;
45px;
height: 45px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96));
border-radius: 50%;
-webkit-animation: item2-5-ac .6s 1.8s ease-in-out both;
}
.play .item2-5{
top: 38%;
left: 50%;
margin: 0 0 0 -47px;
95px;
height: 95px;
background:url(../images/2/item2_5.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f));
background-size: 62px 55px, 100%;
border-radius: 50%;
-webkit-animation: item2-5-ac .3s .9s ease-in-out both;
}
@-webkit-keyframes item2-5-ac{
0%{opacity: 0;-webkit-transform: scale(.8);}
100% {}
}
.item2-6{
position: absolute;
left: 50%;
top: 5%;
169.5px;
height: 52.5px;
background: url(../images/2/xiaoshuo.png);
background-size: 169.5px 52.5px;
margin: 0 0 0 -85px;
-webkit-transform: scale(1.2);
}
/*page3 end*/
/*page4 begin*/
.play .item3-1{
top: 33%;
left: 56%;
30px;
height: 30px;
background:-webkit-gradient(linear, left top, left bottom, from(#2f91ff), to(#5fd4ff));
border-radius: 50%;
-webkit-animation: item3-1-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-1-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,18px, 0);}
100% {}
}
.play .item3-2{
top: 45%;
left: 50%;
margin: 0 0 0 37px;
53px;
height: 53px;
background:-webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0));
border-radius: 50%;
-webkit-animation: item3-2-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-2-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,0px, 0);}
100% {}
}
.play .item3-3{
top: 38%;
left: 50%;
margin: 0 0 0 -110px;
78px;
height: 78px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96));
border-radius: 50%;
-webkit-animation: item3-3-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-3-ac{
0%{ opacity: 0; -webkit-transform:translate3d(18px,8px, 0);}
100% {}
}
.play .item3-4{
top: 59%;
left: 50%;
margin: 0 0 0 -80px;
46px;
height: 46px;
background:-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f));
border-radius: 50%;
-webkit-animation: item3-4-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-4-ac{
0%{ opacity: 0; -webkit-transform:translate3d(18px,-18px, 0);}
100% {}
}
.play .item3-5{
top: 60%;
left: 50%;
margin: 0 0 0 57px;
36px;
height: 36px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb));
border-radius: 50%;
-webkit-animation: item3-5-ac .5s 1.3s ease-in-out both;
}
@-webkit-keyframes item3-5-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-18px,-18px, 0);}
100% {}
}
.play .item3-6{
top: 43%;
left: 50%;
margin: 0 0 0 -45px;
89px;
height: 89px;
-webkit-animation: item3-6-ac .4s ease-in-out both;
}
@-webkit-keyframes item3-6-ac{
0%{ opacity: 0; -webkit-transform:scale(.8);}
100% {}
}
.play .item3-6-bg{
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(82,232,203,.9)), to(rgba(88,200,250,.9)));
border-radius: 50%;
-webkit-animation: item3-6-bg-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-bg-ac{
0%{}
50%{ -webkit-transform:scale(.94);}
100% {}
}
.play .item3-6-top{
position: absolute;
top: 18px;
left: 17px;
56px;
height: 10px;
background: url(../images/3/item3_6_top.png) no-repeat 0 0;
background-size: 56px 10px;
-webkit-animation: item3-6-top-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-top-ac{
0%{}
50%{ -webkit-transform: rotate(-5deg);-webkit-transform-origin:5px 5px;}
100% {}
}
.play .item3-6-bottom{
position: absolute;
top: 22px;
left: 17px;
56px;
height: 48px;
background: url(../images/3/item3_6_bottom.png) no-repeat 0 0;
background-size: 56px 48px;
-webkit-animation: item3-6-bottom-ac .6s .8s ease-in-out both;
}
@-webkit-keyframes item3-6-bottom-ac{
0%{}
50%{ -webkit-transform: rotate(5deg);-webkit-transform-origin:0px 5px;}
100% {}
}
.item3-7{
position: absolute;
top: 5%;
left: 50%;
174px;
height: 62px;
background: url(../images/3/zhuiju.png);
background-size: 174px 62px;
margin: 0 0 0 -87px;
}
/*page3 end*/
/*page4 begin*/
.play .item4-1{
top: 60%;
left: 50%;
margin: 0 0 0 -96px;
192px;
height: 80px;
-webkit-animation: item4-1-ac .4s ease-in-out both;
background: url(../images/4/item4_1.png) no-repeat 50%;
background-size: 192px 80px;
}
@-webkit-keyframes item4-1-ac{
0%{ opacity: 0; -webkit-transform:scale(.8);}
100% {}
}
.play .item4-2{
top: 51%;
left: 50%;
margin: 0 0 0 -30px;
57px;
height: 57px;
background: url(../images/4/item4_2.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#fd9938), to(#fc4b89));
background-size: 51px 26px,100%;
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .3s ease-in-out both;
}
.play .item4-3{
top: 43%;
left: 50%;
margin: 0 0 0 6px;
39px;
height: 39px;
background: url(../images/4/item4_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 22px 22px,100%;
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .4s ease-in-out both;
}
.play .item4-4{
top: 41%;
left: 50%;
margin: 0 0 0 -55px;
42px;
height: 42px;
background: url(../images/4/item4_4.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe32d));
background-size: 27px auto,100%;
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .5s ease-in-out both;
}
.play .item4-5{
top: 36%;
left: 50%;
margin: 0 0 0 -2px;
31px;
height: 31px;
background: -webkit-gradient(linear, left top, left bottom, from(#00d2b1), to(#9cf10b));
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .6s ease-in-out both;
}
.play .item4-6{
top: 34%;
left: 50%;
margin: 0 0 0 -26px;
17px;
height: 17px;
background: -webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0));
border-radius: 50%;
-webkit-animation: item4-l-ac .4s .7s ease-in-out both;
}
.play .item4-7{
top: 30%;
left: 50%;
9px;
height: 9px;
background: #fc6d66;
border-radius: 50%;
-webkit-animation: item4-r-ac .4s .75s ease-in-out both;
}
@-webkit-keyframes item4-l-ac{
0%{ opacity: 0; -webkit-transform:translate3d(3px,3px, 0);}
100% {}
}
@-webkit-keyframes item4-r-ac{
0%{ opacity: 0; -webkit-transform:translate3d(-3px,3px, 0);}
100% {}
}
/*page4 end*/
/*page5 begin*/
.play .item5-1{
top: 41%;
left: 50%;
140px;
height: 140px;
margin-left: -85px;
border-radius: 50%;
background:-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 140px 140px;
-webkit-animation: item5-1-ac .4s .4s ease-in-out both;
}
@-webkit-keyframes item5-1-ac{
0%{ opacity: 0; -webkit-transform:scale(.6);}
100% {}
}
.play .item5-2{
top: 41%;
left: 50%;
95px;
height: 190px;
margin: -65px 0 0 -52px;
background:url(../images/5/item5_2.png) no-repeat 0 0;
-webkit-animation: item5-2-ac .4s 1s ease-in-out both;
overflow: hidden;
background-size: 95px 190px;
}
@-webkit-keyframes item5-2-ac{
0%{ background-position: -85px 190px;}
100% { background-position: 0 0;}
}
.play .item5-3{
top: 41%;
left: 50%;
140px;
height: 140px;
margin-left: -85px;
border-radius: 50%;
background:url(../images/5/item5_3.png) no-repeat 50%;
background-size: 140px 140px;
-webkit-animation: item5-3-ac .3s .6s ease-in-out both;
}
@-webkit-keyframes item5-3-ac{
0%{ opacity: 0;}
100% {}
}
/*page5 end*/
/*page6 begin*/
.play .item6-1{
top: 41%;
left: 50%;
margin: 82px 0 0 4px;
86px;
height: 86px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#f09b45), to(#fc4b88));
-webkit-animation: item6-1-ac .4s ease-in-out both;
}
@-webkit-keyframes item6-1-ac{
0%{ opacity: 0; -webkit-transform:translate3d(0,-200px, 0) scale(.3);}
80%{ opacity: 1;-webkit-transform:translate3d(0,0,0) scale(.3);}
100% {}
}
.play .item6-2{
top: 41%;
left: 50%;
margin: 82px 0 0 11px;
71px;
height: 88px;
background: url(../images/6/item6_2.png) no-repeat 50%;
background-size: 44px;
-webkit-animation: item6-2-ac .4s .4s ease-in-out both;
}
@-webkit-keyframes item6-2-ac{
0%{ opacity: 0; -webkit-transform: rotate(172deg);}
100%{}
}
.play .item6-3{
top: 41%;
left: 50%;
margin: 121px 0 0 45px;
5px;
height: 5px;
border: 1px solid #fff;
background: #2bd9bb;
border-radius: 50%;
-webkit-animation: item6-3-ac 2s 1.4s ease-in-out both infinite;
}
@-webkit-keyframes item6-3-ac{
0%{ opacity: 0;}
1%{opacity:1;-webkit-transform:translate3d(0,0px, 0);}
20%{opacity: 1; -webkit-transform:translate3d(0,25px, 0); background: #fff;}
21%{ opacity: 0;}
100%{ opacity: 0;}
}
.item6-4{
position: absolute;
top: 5%;
left: 50%;
217px;
height: 62px;
background: url(../images/5/liuliang.png);
background-size: 217px 62px;
margin: 0 0 0 -108px;
}
.item6-5{
position: absolute;
top: 50%;
left: 50%;
16px;
height: 16px;
border-radius: 50%;
background: -webkit-gradient(linear, left top, left bottom, from(#9057f9), to(#fb78d0));
margin: 0px 0 0 50px;
opacity: 0;
-webkit-transition: all .6s 1s ease;
}
.play .item6-5{
opacity: 1;
-webkit-transform: translate3d(20px , -20px , 0);
}
/*page6 end*/
/*page7 begin*/
.item7-2,.item7-3,.item7-4,.item7-5,.item7-6{
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
.item7-1{
position: absolute;
top: 50%;
left: 50%;
185px;
height: 138px;
margin: -158px 0 0 -91px;
background: url(../images/last/slogan-0820.png);
background-size: 185px 138px;
}
.item7-2{
position: absolute;
top: 50%;
left: 50%;
25px;
height: 25px;
border-radius: 50%;
background:-webkit-gradient(linear, left top, left bottom, from(#288dff), to(#53dcff));
margin: -3px 0 0 -137px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-2{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 8s 2s linear infinite alternate;
}
.item7-3{
top: 55% !important;
15px;
height: 15px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe22d));
margin: 140px 0 0 57px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-3{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 9s 1s linear infinite alternate;
}
.item7-4{
top: 55% !important;
6px;
height: 6px;
background:-webkit-gradient(linear, left top, left bottom, from(#06d3b3), to(#96ef1a));
margin: 108px 0 0 100px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-4{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 10s 1.5s linear infinite alternate;
}
.item7-5{
10px;
height: 10px;
background:-webkit-gradient(linear, left top, left bottom, from(#955cf8), to(#fb7bd1));
margin: -86px 0 0 111px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-5{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 12s 3s linear infinite alternate;
}
.item7-6{
89px;
height: 89px;
background:-webkit-gradient(linear, left top, left bottom, from(#ff7171), to(#ff32cc));
margin: -182px 0 0 120px;
opacity: 0;
-webkit-transition: all 1s ease .5s;
}
.play .item7-6{
opacity: 1;
-webkit-transform: translate3d(0 , -20px , 0);
-webkit-animation: tinyShock 7s 1.3s linear infinite alternate;
}
@-webkit-keyframes tinyShock{
0%{
-webkit-transform: translate3d( 0 , -20px , 0);
}
25%{
-webkit-transform: translate3d( -5px , -5px , 0);
}
50%{
-webkit-transform: translate3d( 5px , -5px , 0);
}
75%{
-webkit-transform: translate3d( 5px , 5px , 0);
}
100%{
-webkit-transform: translate3d( -5px , 5px , 0);
}
}
/*page7 end*/
/*page8 begin*/
/* add by cjx */
.play .item8-0{
top: 56%;
left: 50%;
270px;
height: 108px;
margin-left: -135px;
background: url(../images/8/skin_phone.png) no-repeat;
background-size: 270px auto;
}
.play .item8-1 {
top: 50%;
left: 50%;
53px;
height: 53px;
margin-left: -22px;
margin-top: -110px;
background: url(../images/8/create.png) 15px 8px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(95,212,255,0.9)), to(rgba(47, 145, 255,0.9)));
background-size: 21px auto,100% auto;
border-radius: 50%;
-webkit-animation: 1s 1.4s item8-1-ac both;
}
@-webkit-keyframes item8-1-ac{
0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);}
100% {}
}
.item8-1-1{
display: none;
}
.play .item8-1-1{
display: inline-block;
position: absolute;
top: 32px;
50px;
left: 6px;
color: white;
font-size: 10px;
font-family: "Microsoft Yahei";
}
.play .item8-2{
top: 50%;
left: 50%;
71px;
height: 71px;
margin-left: -75px;
margin-top: -46px;
background:-webkit-gradient(linear, left top, left bottom, from(rgba(118,128,140,1)), to(rgba(64, 63, 89,1)));
background-size:100% auto;
border-radius: 50%;
-webkit-animation: 1s item8-2-ac .6s both;
}
@-webkit-keyframes item8-2-ac{
0%{ opacity: 0;-webkit-transform: translate3d(15px,30px,0) scale(.8);}
100% {}
}
.play .item8-2-1 {
display: block;
margin: 10px 0 0 30px;
26px;
height: 26px;
background: #ffe700;
border-radius: 50%;
-webkit-animation:3s 0.5s item8-2-1-ac alternate infinite ease-in-out;
}
@-webkit-keyframes item8-2-1-ac{
0%{}
100% {-webkit-transform: translate3d(-5px,0,0);}
}
.play .item8-2-2 {
display: block;
margin: -20px 0 0 14px;
41px;
height: 29px;
background: url(../images/8/wether_cloud.png) no-repeat;
background-size: 100% auto;
-webkit-animation:3s 0.5s skin_wether_cloud alternate infinite ease-in-out;
}
@-webkit-keyframes skin_wether_cloud{
0%{}
100% {-webkit-transform: translate3d(4px,0,0);}
}
.item8-2-3{
display: none;
}
.play .item8-2-3{
display: inline-block;
position: absolute;
top: 50px;
50px;
left: 23px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.play .item8-3 {
top: 50%;
left: 50%;
60px;
height: 60px;
margin-left: -10px;
border-radius: 50%;
-webkit-animation: 1s 0.2s item8-3-ac both;
overflow: hidden;
z-index: 5;
}
@-webkit-keyframes item8-3-ac{
0%{ opacity: 0;-webkit-transform:translate3d(0,30px,0) scale(.8);}
100% {}
}
.play .skin_phone {
-webkit-animation:0.5s skin_phone;
opacity: 1;
}
@-webkit-keyframes skin_phone{
0%{ opacity: 0;-webkit-transform: translateY(30px) scale(.8);}
100% { opacity: 1;-webkit-transform: translateY(0px) scale(1);}
}
.play .skin_moon {
-webkit-animation:0.7s 0.4s skin_moon;
opacity: 1;
}
.play .item8-3-1 {
display: block;
100%;
height: 100%;
background:url(../images/8/cloth_bg.png) center no-repeat;
background-size: 30px auto;
border-radius: 50%;
-webkit-animation: .8s 2s item8-3-1-ac ease-out both;
}
@-webkit-keyframes item8-3-1-ac{
0%{ background:url(../images/8/cloth_bg.png) center no-repeat;}
100% { background:url(../images/8/cloth_bg2.png) center no-repeat;}
}
.play .item8-3-2{
display: block;
100%;
height: 100%;
margin-top: -112%;
background: url(../images/8/cloth.png) center no-repeat;
background-size: 30px auto;
-webkit-animation:0.8s 2s item8-3-2-ac ease-out;
}
@-webkit-keyframes item8-3-2-ac{
0%{ opacity: 1;}
35%{opacity: 0;}
100%{ opacity: 0; background-position: 200% 50%;}
}
.play .item8-3-3 {
display: block;
100%;
height: 100%;
margin-top: -100%;
background: url(../images/8/cloth.png) center no-repeat;
background-size:30px auto;
-webkit-animation:0.8s 2s item8-3-3-ac ease-out both;
opacity: 0;
}
@-webkit-keyframes item8-3-3-ac{
50%{ opacity: 0; background-position: -100% 50%;}
100%{ opacity: 1; background-position: 50% 50%;}
}
.item8-3-4{
display: none;
}
.play .item8-3-4{
display: inline-block;
position: absolute;
top: 40px;
left: 19px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.play .item8-4 {
top: 50%;
left: 50%;
58px;
height: 58px;
margin-left: 26px;
margin-top: -40px;
background: url(../images/8/smile.png) 17px 9px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(255,181,40,0.9)), to(rgba(252, 129, 69,0.9)));
background-size: 25px auto,100% auto;
border-radius: 50%;
-webkit-animation: 1s 1s item8-1-ac both;
}
@-webkit-keyframes item8-1-ac{
0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);}
100% {}
}
.item8-4-1{
display: none;
}
.play .item8-4-1{
display: inline-block;
position: absolute;
top: 38px;
left: 17px;
color: white;
font-size: 12px;
font-family: "Microsoft Yahei";
}
.item8-5{
position: absolute;
top: 5%;
left: 50%;
227px;
height: 62px;
background: url(../images/8/uc.png);
background-size: 227px 62px;
margin: 0 0 0 -113px;
}
/*底部信息*/
#footer_tips{
280px;
height: 18px;
padding: 0 4px 0 4px;
position: absolute;
left: 50%;
bottom: 38px !important;
margin-left: -140px;
border-bottom: 1px solid #babdd4;
text-align: center;
}
#footer_tips a{
font-size: 9.5px;
color: #4d558f;
}
#footer_tips span{
position: absolute;
top: 4px;
left: 66px;
font-size: 12px;
color: #babdd4;
margin-top: 22px;
margin-left: 8px;
}
#footer_tips :nth-child(1){
float: left;
}
#footer_tips :nth-child(2){
float: right;
}
#footer_tips .current {
-webkit-transition: all .3s ease .3s;
-webkit-backface-visibility: hidden;
opacity: 1;
}
/*page8 end*/
/*pageuc begin*/
.itemuc-0{
top: 23%;
left: 50%;
margin: 0 0 0 -150px;
280px;
font-size: 13px;
color: #686868;
line-height: 24px;
}
.itemuc-0 strong{
font-weight: normal;
color: #3095ef;
}
.itemuc-0 em{
font-style: normal;
color: #3095ef;
}
.itemuc-1{
top:50%;
left: 50%;
margin: 0 0 0 -50px;
100px;
height: 100px;
border-radius: 50%;
background: url(../images/uc/itemuc_1.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff));
background-size: 62px auto,100%;
}
/*pageuc end*/
.top{
position: absolute;
bottom: 10px;
right: 10px;
30px;
height: 30px;
border-radius: 15px;
background: url(../images/top.png) no-repeat 50%,rgba(217,217,217,.8);
background-size: 30px 30px,100%;
}
</style>
<div id="slide" class="slide" style="height: 667px;">
<ul id="slide_ul" class="cf">
<li class="" style="opacity: 0; height: 667px; z-index: 20;">
<h1><img width="185px" src="http://wap3.ucweb.com/public/pdia_res/chinese/iphonewap/106/images/0/h1-0820.png"></h1>
<p class="item0-1"></p>
<p class="item0-2"></p>
<p class="item0-3"></p>
<p class="item0-4"></p>
<p class="item0-5"></p>
<p class="item0-6"></p>
<p class="item0-7"></p>
<p class="item0-8 "></p>
<p class="item0-0"></p>
<div class="active">
<a class="active-link" >
<h4></h4>
<h3></h3>
</a>
</li>
<li>
222222222222222
</li>
<li>
333
</li>
</ul>
<div id="slide_point" class="slide-point" style="display: block;"> //右侧 小点
<span class="current"></span>
<span class=""></span>
<span class=""></span>
</div>
<div id="mybtn" class="mybtn">asd</div>
http://wap.uc.cn/packinfo/chinese_999/ucbrowser/pf/41?uc_param_str=vepffrbiuplaei&r=main&from=wap-atb-mobile&plang=
<script>
function Slide(wrap,cont,point,tag){
this.winW = document.documentElement.clientWidth;
this.winH = document.documentElement.clientHeight;
this.wrap = document.getElementById(wrap);
this.cont = document.getElementById(cont);
this.cont_li = this.cont.getElementsByTagName("li");
this.slide_points = document.getElementById(point).getElementsByTagName(tag);
this.startN = 0;
this.prev = 1;
this.startX = 0;
this.startY = 0;
this.endX = 0;
this.transX = 0;
this.transY = 0;
}
Slide.prototype = {
init:function(){
this.startN = 0;
this.cont_li[0].className = 'play';
this.cont_li[0].style.opacity = 1;
for(var i=1;i<this.cont_li.length;i++){
this.cont_li[i].style.webkitTransform = 'translate3d(0,'+this.winH+'px,0)';
}
this.resize();
this.addHandler(this.wrap,"touchstart",this.bind_fn(this,this.touch_start));
this.addHandler(this.wrap,"touchmove",this.bind_fn(this,this.touch_move));
this.addHandler(this.wrap,"touchend",this.bind_fn(this,this.touch_end));
},
resize : function(){
this.winH = document.documentElement.clientHeight;
document.body.style.height=this.wrap.style.height = this.winH+"px";
for(var i=0;i<this.cont_li.length;i++){
this.cont_li[i].style.height = this.winH+'px';
}
},
addHandler : function(elem,evtype,fn){
if(elem.attachEvent){
elem.attachEvent('on'+evtype,fn);
}else if(elem.addEventListener){
elem.addEventListener(evtype,fn,false);
}else{
elem["on"+evtype] = fn;
}
},
bind_fn : function(obj,func){
return function(){
func.apply(obj,arguments);
};
},
touch_start : function(e){
if(!event.touches.length) return;
var touch = event.touches[0];
this.startX = touch.pageX;
this.startY = touch.pageY;
},
touch_move : function(e){
if(!event.touches.length) return;
e.preventDefault();
var touch = event.touches[0];
this.transX = this.startX-touch.pageX;
this.transY = this.startY-touch.pageY;
if(Math.abs(this.transY)>Math.abs(this.transX)){
this.transY = this.startY-touch.pageY;
this.prev = this.transY/Math.abs(this.transY);
var index = this.startN+this.prev;
if(typeof this.cont_li[index] != 'undefined'){
this.cont_li[index].style.opacity = 1;
this.cont_li[index].style.zIndex = 50;
this.cont_li[index].style.webkitTransitionDuration = 0;
this.cont_li[index].style.webkitTransform = "translate3d(0,"+(this.prev*this.winH-(this.transY))+"px,0)";
this.cont_li[this.startN].style.zIndex=20;
}
}
},
touch_end : function(){
if(Math.abs(this.transY)>Math.abs(this.transX) && Math.abs(this.transY)>50){
this.cont_li[this.startN].className = '';
this.play(this.startN+this.prev);
}else{
this.play(this.startN);
}
this.transY = this.transX = 0;
},
play : function(n){
var _=this;
if(n>=this.cont_li.length){
n = this.cont_li.length-1;
}
if(n<0){
n = 0;
}
if(typeof this.cont_li[n] != 'undefined'){
this.cont_li[_.startN].style.zIndex = 20;
this.cont_li[n].className = 'play';
this.cont_li[n].style.webkitTransitionDuration = '300ms';
this.cont_li[n].style.webkitTransform = 'translate3d(0,0,0)';
this.cont_li[n].style.opacity=1;
this.cont_li[n].style.zIndex = 50;
this.slide_point(n);
// var download = document.getElementById('mybtn');
// console.log(n)
// if(n == 7){
// download.style.marginTop = '-70px';
// }
// else{
// download.style.marginTop = '0px';
// }
setTimeout(function(){
_.startN = n;
if(_.startN+_.prev>=0 && _.startN+_.prev<=_.cont_li.length){
_.cont_li[_.startN-_.prev].style.opacity = 0;
}
},300);
}
if(n === 0){
document.getElementById('slide_point').style.display = 'none';
}else{
document.getElementById('slide_point').style.display = 'block';
}
},
slide_point : function(n){
for(var i=0;i<this.cont_li.length;i++){
this.slide_points[i].className = "";
}
this.slide_points[n].className = "current";
}
};
var slide1 = new Slide("slide","slide_ul","slide_point","span");
slide1.init();
window.onresize = function(){
slide1.resize();
};
//圆转动
</script>
</body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>http://down2.uc.cn/ucbrowser/v2/platform/android.php<style> html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; list-style: none;}body { font-family: "Myriad Set Pro","Lucida Grande","Helvetica Neue","Helvetica","Arial","Verdana","sans-serif"; -webkit-text-size-adjust:100%; background: #fff; color: #666; -webkit-font-smoothing:antialiased; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
/*clear*/.cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}a{ color: #666; text-decoration: none;}
.mybtn{ position: absolute; top: 78%; left: 50%; margin: 0 0 0 -65px; 130px; z-index: 90;}.mybtn a { display: block;}.appstore{ margin-bottom: 10px; padding: 3px 0 3px 39px; height: 34px; font-size: 12px; line-height: 18px; color: #fff; border-radius: 3px; background: #000 url(../images/appstore.png) no-repeat 10px 7px; background-size: 21px 26px;}.appstore strong{ display: block; font-size: 17px;}.crack{ margin: 0 20px; font-size: 15px; line-height: 20px; text-align: center; color: #686868;}.active{ position: absolute; top: 0; right:0; z-index: 100; display: block; 102px; height: 84px; background: url(../images/active.png) no-repeat 0 0; background-size: 102px 84px; overflow: hidden;}a.active-link{ position: absolute; top: 15px; left: 27px; display: block; 86px; height: 30px; color: #fff; text-align: center; -webkit-transform: rotate(37deg);}.active-link h4{ font-size: 10px; margin-top: -10px;}.active-link h3{ font-size: 12px; font-family: 微软雅黑;}
.slide li:before{ position: absolute; bottom: 5px; left: 50%; content: ''; display: block; 26px; height: 18px; margin-left: -13px; background-image: url(../images/arrow_other.png); background-size: 26px 18px; -webkit-animation: shake 1s ease-in-out infinite normal;}@-webkit-keyframes shake{ 0% {-webkit-transform: translate(0,0);} 25% {-webkit-transform: translate(0,-10px);} 50% {-webkit-transform: translate(0,0);} 70% {-webkit-transform: translate(0px,-5px);} 100% {-webkit-transform: translate(0,0);}}.slide li:last-child:before{ display: none;}
/*slide-start*/.slide{ position: relative; overflow: hidden;}.slide ul{ 100%; height: 100%; z-index: 1; overflow: hidden; background-size: 320px;}.slide li{ position: absolute; left: 0; top: 0; 100%; background: -webkit-radial-gradient(39% 77%,ellipse, #fff, #fff 50%, #edefff 70%); background-size: 130% 120%; -webkit-transition: transform .3s ease-in-out; opacity: 0;}.slide .slide-img{ position: absolute; top: 50%; left: 12px; margin-top: -44px;}.slide .slide-title{ position: absolute; top: 27px; left: 91px; color: #01a8f2;}.slide .slide-text{ position: absolute; top: 48px; left: 91px; font-size: 10px; line-height: 21px;}.slide-point{ position: absolute; top: 50%; right: 16px; margin: -50px 0 0 0; display: none; 9px; text-align: center; font-size: 0; z-index: 90; -webkit-animation: dis-show 0s ease forwards;}.slide-point span{ margin: 6px auto; 4px; height: 4px; border-radius: 50%; background: #c8e3f9; display: block; z-index: 100;}.slide-point span.current{ margin: 6px auto; background: #8fcbfb; z-index: 100;}.slide-point span:first-child{ 8px; height: 8px; margin: 4px auto; background: url(../images/icon_home.png) no-repeat 50%; background-size: 8px;}/*slide-end*/
/*分屏*/h1{ position: absolute; top: 10%; left: 0; 100%; font-size: 29px; font-weight: 400; color: #3095ef; text-align: center;}h1 em{ display: block; text-align: center; font-size: 15px; font-style: normal; color: #686868; line-height: 24px;
}
.slide p{ position: absolute;}.slide p img{ 100%;}/*page0 begin*/.item0-0{ top: 47%; left: 50%; margin: 33px 0 0 -45px; 90px; height: 90px; background:url(../images/0/item0_0.png) no-repeat 0 16px,-webkit-gradient(linear, left top, left bottom, from(rgb(28,135,255)), to(rgb(75, 219, 255))); background-size:83px auto,100% auto; border-radius: 50%; opacity: 0; -webkit-transform:scale(.9); -webkit-animation: none; }.play .item0-0{ -webkit-transition: all 1s ease-in-out; opacity: 1; -webkit-transform:scale(1); -webkit-animation: item0-0-ac 4s ease-in-out infinite alternate;}@-webkit-keyframes item0-0-ac{ 0%{ -webkit-transform: translate3d( 2px ,2px , 0); } 25%{ -webkit-transform: translate3d( 2px ,0 , 0); } 50%{ -webkit-transform: translate3d( 0 ,2px , 0); } 75%{ -webkit-transform: translate3d( 0 ,-2px , 0); } 100% { -webkit-transform: translate3d( -2px ,-2px , 0); }}.play .item0-1{ top: 47%; left: 50%; margin: 33px 0 0 -45px; 89px; height: 89px; background:-webkit-gradient(linear, left top, left bottom, from(#ffe438), to(#ff8823)); border-radius: 50%; opacity: 0; webkit-transition: opacity 5s ease-in-out; -webkit-animation: circleRotate 3s .9s ease-in-out both infinite alternate; -webkit-transform-origin: 40px 48px;}@-webkit-keyframes circleRotate{ 0%{ -webkit-transform : rotate(0deg); } 1%{ opacity: 1; } 100%{ -webkit-transform : rotate(360deg); opacity: 1; }}.play .item0-2{ top: 47%; left: 50%; margin: 33px 0 0 -45px; 89px; height: 89px; background:-webkit-gradient(linear, left top, left bottom, from(#ffa049), to(#ff6095)); border-radius: 50%; opacity: 0; -webkit-animation: circleRotate 4s 1.5s ease-in-out both infinite alternate;; -webkit-transform-origin: 45px 37px;}.play .item0-3{ top: 47%; left: 50%; margin: 34px 0 0 -44px; 89px; height: 89px; background:-webkit-gradient(linear, left top, left bottom, from(#52f5e4), to(#00ccb1)); border-radius: 50%; opacity: 0; -webkit-animation: circleRotate 5s 2s ease-in-out both infinite alternate;; -webkit-transform-origin: 45px 50px;}.item0-4{ opacity: 0; -webkit-transition: opacity 2.5s ease 1s;}
.play .item0-4{ top: 47%; left: 50%; margin: 97px 0 0 -92px; 17px; height: 17px; background:-webkit-gradient(linear, left top, left bottom, from(#46b0ff), to(#46b0ff)); border-radius: 50%; opacity: 1;
-webkit-animation: shock 5.3s 1s ease-in-out infinite alternate;}.item0-5{ opacity: 0; -webkit-transition: opacity 2.5s ease 1s;}
.play .item0-5{ top: 41%; left: 50%; margin: 80px 0 0 53px; 24px; height: 24px; background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb)); border-radius: 50%; opacity: 1; -webkit-animation: shock 5s .9s ease-in-out infinite alternate ;}.item0-6{ opacity: 0; -webkit-transition: opacity 2.5s ease 1s;}.play .item0-6{ top: 50%; left: 50%; 10px; height: 10px; margin: 101px 0 0 49px; background:#ff6b88; border-radius: 50%; opacity: 1; -webkit-animation: shock 6s 1.1s ease-in-out infinite alternate;}.item0-7{ opacity: 0; -webkit-transition: opacity 2.5s ease 1s;}.play .item0-7{ top: 50%; left: 50%; 7px; height: 7px; margin: 75px 0 0 85px; background:#8b92ff; border-radius: 50%; opacity: 1; -webkit-animation: shock 4s 1.1s ease-in-out infinite alternate;}.item0-8{ opacity: 0; -webkit-transition: opacity 2.5s ease 1s;}.play .item0-8{ top: 50%; left: 50%; margin: 54px 0 0 -85px;; 7px; height: 7px; background: #ffdc36; border-radius: 50%; opacity: 1; -webkit-animation: shock 4.3s .6s ease-in-out infinite alternate;}@-webkit-keyframes shock{ 0%{ -webkit-transform : translate3d(0 , 0 , 0); } 30%{ -webkit-transform : translate3d(10px , 10px , 0); } 60%{ -webkit-transform : translate3d(8px , 14px , 0); } 100%{ -webkit-transform : translate3d(6px , 9px , 0); }}/*page0 end*//*page1 start*/.play .item1-1,.play .item1-7{ top: 58%; left: 50%; margin: 0 0 0 -135px; 271px; height: 54px; background: url(../images/1/item7_1.png) no-repeat 50% 0; background-size: 271px; -webkit-animation: skin_phone .8s .2s both;
}.play .item1-7{ background-image: url(../images/1/item7_7.png);}.item1-2,.item1-3,.item1-4,.item1-5{ top: 58%; left: 50%; 53px; height: 53px; line-height: 53px; text-align: center; color: #fff; border-radius: 50%; font-family: 'Microsoft Yahei'; font-size: 15px;}.item1-2{ margin: -31px 0px 0 -86px; background:-webkit-gradient(linear, left top, left bottom, from(#ffbb04), to(#ff903c)); opacity: 0; }.play .item1-2{ -webkit-transition: all .7s 1s ease-out; -webkit-animation: scaleOut .3s 2.9s ease-out both; opacity: 1; margin: -56px 0px 0 -86px;}.item1-2:after{ position: absolute; right: 0; bottom: -9px; content: ""; display: block; 27px; height: 24px; background: url(../images/1/tick.png); background-size: 27px 24px; -webkit-transform : scale(.1);}.play .item1-2:after{ -webkit-transition: all .5s ease 3s; opacity: 1; -webkit-transform : scale(1);} .item1-3{ margin: -15px 0px 0 27px; background:-webkit-gradient(linear, left top, left bottom, from(#adf237), to(#2dd9b9)); opacity: 0;}.play .item1-3{ -webkit-transition: all .7s 1s ease-out; -webkit-animation: scaleOut .3s 2.6s ease-out both; opacity: 1; margin: -40px 0px 0 27px;}.item1-3:after{ position: absolute; right: 0; bottom: -9px; content: ""; display: block; 27px; height: 24px; background: url(../images/1/tick.png); background-size: 27px 24px; opacity: 0; -webkit-transform : scale(.1);}.play .item1-3:after{ -webkit-transition: all .5s ease 2.6s; opacity: 1; -webkit-transform : scale(1);}.item1-4{ margin: -135px 0px 0 46px; background:-webkit-gradient(linear, left top, left bottom, from(#439cff), to(#76daff)); opacity: 0; }.play .item1-4{ -webkit-transition: all .5s 1s ease-out; -webkit-animation: scaleOut .3s 2s ease-out both; opacity: 1; margin: -145px 0px 0 46px;}.item1-4:after{ position: absolute; right: 0; bottom: -9px; content: ""; display: block; 27px; height: 24px; background: url(../images/1/tick.png); background-size: 27px 24px; opacity: 0; -webkit-transform : scale(.1); }.play .item1-4:after{ -webkit-transition: all .5s ease 1.8s; opacity: 1; -webkit-transform : scale(1);}.item1-5{ margin: -140px 0px 0 -76px; background:-webkit-gradient(linear, left top, left bottom, from(#9967fa), to(#fb85d5)); opacity: 0; }.play .item1-5 { -webkit-transition: all .5s 1s ease-out; opacity: 1; margin: -156px 0px 0 -76px; -webkit-animation: scaleOut .3s 1.7s ease-out both;}@-webkit-keyframes scaleOut{ 0%{ -webkit-transform: scale(1); } 50%{ -webkit-transform: scale(1.2); } 100%{ -webkit-transform: scale(1); }}.item1-5:after{ position: absolute; right: 0; bottom: -9px; content: ""; display: block; 27px; height: 24px; background: url(../images/1/tick.png); background-size: 27px 24px; -webkit-transform : scale(.1); opacity: 0;}.play .item1-5:after{ -webkit-transition: all .5s ease 1.7s; opacity: 1; -webkit-transform : scale(1);}.item1-6{ top: 50%; left: 50%; 62px; height: 62px; border-radius: 50%; text-align: center; line-height: 62px; margin: -47px 0px 0 -23px; font-family: 'Microsoft Yahei'; color: #fff; background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb)); opacity: 0;}.play .item1-6{ -webkit-transition: all .9s 1s ease-out; opacity: 1; margin: -57px 0px 0 -23px; -webkit-animation: scaleOut .3s 2.3s ease-out both;}.item1-6:after{ position: absolute; right: 0; bottom: -9px; content: ""; display: block; 27px; height: 24px; background: url(../images/1/tick.png); background-size: 27px 24px; -webkit-transform : scale(.1);}.play .item1-6:after{ -webkit-transition: all .5s ease 2.3s; opacity: 1; -webkit-transform : scale(1);}
.item1-8{ top: 50%; left: 50%; 13px; height: 13px; border-radius: 50%; text-align: center; margin: -5px 0px 0 54px; background:-webkit-gradient(linear, left top, left bottom, from(#fc4f8b), to(#fda14d)); opacity: 0; }.play .item1-8{ -webkit-transition: all .5s 1.8s ease-out; -webkit-animation: gradientOut 1s .8s ease-out both; opacity: 1; -webkit-transform: translateY(-15px);}.item1-9{ top: 50%; left: 50%; 9px; height: 9px; border-radius: 50%; text-align: center; margin: -115px 0px 0 -15px; background:-webkit-gradient(linear, left top, left bottom, from(#ffc322), to(#ff9e53)); opacity: 0; }.play .item1-9{ -webkit-transition: all .5s 1.8s ease-out; -webkit-animation: gradientOut 1s .8s ease-out both; opacity: 1; -webkit-transform: translateY(-15px);}.item1-10{ position: absolute; left: 50%; top: 5%; 174px; height: 60px; background: url(../images/1/read.png); background-size: 174px 60px; margin: 0 0 0 -87px;}
/*page1 end*//*page2 begin*/.screen2-1{ position: absolute; top: 50%; left: 50%; 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; transform: scale(1); background: -webkit-gradient(linear, left top, left bottom, from(#6fd7ff), to(#439cff)); opacity: 0;}.play .screen2-1{ -webkit-animation: screen2-1 1.4s ease .1s forwards;}@-webkit-keyframes screen2-1{ 0%{ -webkit-transform: scale(0); opacity: 0; } 30%{ -webkit-transform: scale(1); opacity: 1; } 70%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(0); opacity: 0; }}.screen2-2{ position: absolute; left: 50%; top: 50%; 35px; margin: -18px 0 0 -17px;}.play .screen2-2{ -webkit-animation: screen2-2 1s linear .2s forwards; -webkit-transform: origin(22px 20px);}@-webkit-keyframes screen2-2{ 0%{ -webkit-transform: rotate(0deg); }
100%{ -webkit-transform: rotate(400deg); }}.screen2-3{ position: absolute; top: 50%; left: 50%; margin: -47px 0 0 -47px; 95px; opacity: 0; -webkit-transform: scale(0);}.play .screen2-3{ -webkit-transition: all .6s ease 1s; -webkit-transform: scale(1); opacity: 1;}.screen2-4,.screen2-5,.screen2-6,.screen2-7,.screen2-8,.screen2-9{ position: absolute; left: 50%; top: 50%; display: block; margin: -28px 0 0 -28px; opacity: 0;}.screen2-4{ 56px; height: 57px; background: url(../images/2/pop.png); background-size: 225px 61px; opacity: 0; -webkit-transform: translate3d( -10px,-10px ,0) scale(0); }.play .screen2-4{ -webkit-transition: all .4s ease 1.2s; opacity: 1; -webkit-transform: translate3d( 60px ,-60px ,0) scale(1);;}.screen2-5{ 61px; height: 61px; background: url(../images/2/pop.png) -58px 0; background-size: 225px 61px; opacity: 0; -webkit-transform: translate3d( -10px,-10px ,0) scale(0);}.play .screen2-5{ -webkit-transition: all .4s ease 1.2s; opacity: 1; -webkit-transform: translate3d( -80px ,80px ,0) scale(1);;}.screen2-6{ display: block; 57px; height: 57px; background: url(../images/2/pop.png) -120px 0; background-size: 225px 61px; opacity: 0; -webkit-transform: translate3d( -10px,-10px ,0) scale(0);
}.play .screen2-6{ -webkit-transition: all .4s ease 1.2s; opacity: 1; -webkit-transform: translate3d( -45px ,-45px ,0) scale(1);;}.screen2-7{ display: block; 46px; height: 46px; background: url(../images/2/pop.png) -404px 0; background-size: 225px 61px; opacity: 0; -webkit-transform: translate3d( -10px,-10px ,0) scale(0);}.play .screen2-7{ -webkit-transition: all .4s ease 1.2s; opacity: 1; -webkit-transform: translate3d( 70px ,70px ,0) scale(1);;}.screen2-8{ display: block; 13px; height: 13px; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, from(#ffb321), to(#fc7f39)); opacity: 0; -webkit-transform: translate3d( 30px,-10px ,0) scale(0);}.play .screen2-8{ -webkit-transition: all .5s ease 1.4s; opacity: 1; -webkit-transform: translate3d( 80px ,35px ,0) scale(1);;}.screen2-9{ display: block; 13px; height: 13px; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, from(#9c6bfa), to(#fb88d6)); opacity: 0; -webkit-transform: translate3d( 10px,-10px ,0) scale(0); }.play .screen2-9{ -webkit-transition: all .5s ease 1.4s; opacity: 1; -webkit-transform: translate3d( -10px ,-80px ,0) scale(1);;}.screen2-10{ position: absolute; top: 5%; left: 50%; 190px; height: 59px; background: url(../images/2/5000w.png); background-size: 190px 59px; margin: 0 0 0 -85px; }/*page2 end*//*page3 start*/.play .item2-1{ top: 36%; left: 50%; margin: 0 0 0 -83px; 31px; height: 31px; background:-webkit-gradient(linear, left top, left bottom, from(#a7f129), to(#2bd9bb)); border-radius: 50%; -webkit-animation: item2-5-ac .6s 1.3s ease-in-out both;}.play .item2-2{ top: 31%; left: 50%; margin: 0 0 0 38px; 46px; height: 46px; background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb)); border-radius: 50%; -webkit-animation: item2-5-ac .6s 2.0s ease-in-out both;}.play .item2-3{ top: 52%; left: 50%; 44px; height: 44px; background:url(../images/2/item2_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(rgba(28,135,255,0.9)), to(rgba(75, 219, 255,0.9))); background-size:23px auto,100% auto; border-radius: 50%; -webkit-animation: item2-3-ac 1.6s .1s ease-in-out both;}@-webkit-keyframes item2-3-ac{ 0%{opacity: 0;-webkit-transform:translate3d(-22px,-144px, 0);} 20% { opacity: 1;-webkit-transform:translate3d(-22px,60px, 0);} 30% { opacity: 1;-webkit-transform:translate3d(-22px,-44px, 0);} 45% { opacity: 0;-webkit-transform:translate3d(-22px,-44px, 0) scale(1.6);} 46% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);} 99% { opacity: 0;-webkit-transform:translate3d(44px,0px, 0);} 100% { opacity: 1;-webkit-transform:translate3d(44px,0px, 0);}}.play .item2-4{ top: 58%; left: 50%; margin: 0 0 0 -105px; 45px; height: 45px; background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96)); border-radius: 50%; -webkit-animation: item2-5-ac .6s 1.8s ease-in-out both;}.play .item2-5{ top: 38%; left: 50%; margin: 0 0 0 -47px; 95px; height: 95px; background:url(../images/2/item2_5.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f)); background-size: 62px 55px, 100%; border-radius: 50%; -webkit-animation: item2-5-ac .3s .9s ease-in-out both;}@-webkit-keyframes item2-5-ac{ 0%{opacity: 0;-webkit-transform: scale(.8);} 100% {}}.item2-6{ position: absolute; left: 50%; top: 5%; 169.5px; height: 52.5px; background: url(../images/2/xiaoshuo.png); background-size: 169.5px 52.5px; margin: 0 0 0 -85px; -webkit-transform: scale(1.2);}/*page3 end*/
/*page4 begin*/
.play .item3-1{ top: 33%; left: 56%; 30px; height: 30px; background:-webkit-gradient(linear, left top, left bottom, from(#2f91ff), to(#5fd4ff)); border-radius: 50%; -webkit-animation: item3-1-ac .5s 1.3s ease-in-out both;}@-webkit-keyframes item3-1-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(-18px,18px, 0);} 100% {}}.play .item3-2{ top: 45%; left: 50%; margin: 0 0 0 37px; 53px; height: 53px; background:-webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0)); border-radius: 50%; -webkit-animation: item3-2-ac .5s 1.3s ease-in-out both;}@-webkit-keyframes item3-2-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(-18px,0px, 0);} 100% {}}.play .item3-3{ top: 38%; left: 50%; margin: 0 0 0 -110px; 78px; height: 78px; background:-webkit-gradient(linear, left top, left bottom, from(#ffa148), to(#ff5f96)); border-radius: 50%; -webkit-animation: item3-3-ac .5s 1.3s ease-in-out both;}@-webkit-keyframes item3-3-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(18px,8px, 0);} 100% {}}.play .item3-4{ top: 59%; left: 50%; margin: 0 0 0 -80px; 46px; height: 46px; background:-webkit-gradient(linear, left top, left bottom, from(#ffa904), to(#fc6d1f)); border-radius: 50%; -webkit-animation: item3-4-ac .5s 1.3s ease-in-out both;}@-webkit-keyframes item3-4-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(18px,-18px, 0);} 100% {}}.play .item3-5{ top: 60%; left: 50%; margin: 0 0 0 57px; 36px; height: 36px; background:-webkit-gradient(linear, left top, left bottom, from(#ff6e6e), to(#ff2ecb)); border-radius: 50%; -webkit-animation: item3-5-ac .5s 1.3s ease-in-out both;}@-webkit-keyframes item3-5-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(-18px,-18px, 0);} 100% {}}.play .item3-6{ top: 43%; left: 50%; margin: 0 0 0 -45px; 89px; height: 89px; -webkit-animation: item3-6-ac .4s ease-in-out both;}@-webkit-keyframes item3-6-ac{ 0%{ opacity: 0; -webkit-transform:scale(.8);} 100% {}}.play .item3-6-bg{ position: absolute; top: 0; left: 0; 100%; height: 100%; background:-webkit-gradient(linear, left top, left bottom, from(rgba(82,232,203,.9)), to(rgba(88,200,250,.9))); border-radius: 50%; -webkit-animation: item3-6-bg-ac .6s .8s ease-in-out both;}@-webkit-keyframes item3-6-bg-ac{ 0%{} 50%{ -webkit-transform:scale(.94);} 100% {}}.play .item3-6-top{ position: absolute; top: 18px; left: 17px; 56px; height: 10px; background: url(../images/3/item3_6_top.png) no-repeat 0 0; background-size: 56px 10px; -webkit-animation: item3-6-top-ac .6s .8s ease-in-out both;}@-webkit-keyframes item3-6-top-ac{ 0%{} 50%{ -webkit-transform: rotate(-5deg);-webkit-transform-origin:5px 5px;} 100% {}}
.play .item3-6-bottom{ position: absolute; top: 22px; left: 17px; 56px; height: 48px; background: url(../images/3/item3_6_bottom.png) no-repeat 0 0; background-size: 56px 48px; -webkit-animation: item3-6-bottom-ac .6s .8s ease-in-out both;}@-webkit-keyframes item3-6-bottom-ac{ 0%{} 50%{ -webkit-transform: rotate(5deg);-webkit-transform-origin:0px 5px;} 100% {}}.item3-7{ position: absolute; top: 5%; left: 50%; 174px; height: 62px; background: url(../images/3/zhuiju.png); background-size: 174px 62px; margin: 0 0 0 -87px;}/*page3 end*//*page4 begin*/.play .item4-1{ top: 60%; left: 50%; margin: 0 0 0 -96px; 192px; height: 80px; -webkit-animation: item4-1-ac .4s ease-in-out both; background: url(../images/4/item4_1.png) no-repeat 50%; background-size: 192px 80px;}@-webkit-keyframes item4-1-ac{ 0%{ opacity: 0; -webkit-transform:scale(.8);} 100% {}}.play .item4-2{ top: 51%; left: 50%; margin: 0 0 0 -30px; 57px; height: 57px; background: url(../images/4/item4_2.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#fd9938), to(#fc4b89)); background-size: 51px 26px,100%; border-radius: 50%; -webkit-animation: item4-l-ac .4s .3s ease-in-out both;}.play .item4-3{ top: 43%; left: 50%; margin: 0 0 0 6px; 39px; height: 39px; background: url(../images/4/item4_3.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff)); background-size: 22px 22px,100%; border-radius: 50%; -webkit-animation: item4-r-ac .4s .4s ease-in-out both;}.play .item4-4{ top: 41%; left: 50%; margin: 0 0 0 -55px; 42px; height: 42px; background: url(../images/4/item4_4.png) no-repeat 50% 60%,-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe32d)); background-size: 27px auto,100%; border-radius: 50%; -webkit-animation: item4-l-ac .4s .5s ease-in-out both;}.play .item4-5{ top: 36%; left: 50%; margin: 0 0 0 -2px; 31px; height: 31px; background: -webkit-gradient(linear, left top, left bottom, from(#00d2b1), to(#9cf10b)); border-radius: 50%; -webkit-animation: item4-r-ac .4s .6s ease-in-out both;}.play .item4-6{ top: 34%; left: 50%; margin: 0 0 0 -26px; 17px; height: 17px; background: -webkit-gradient(linear, left top, left bottom, from(#7f52ff), to(#fb78d0)); border-radius: 50%; -webkit-animation: item4-l-ac .4s .7s ease-in-out both;}.play .item4-7{ top: 30%; left: 50%; 9px; height: 9px; background: #fc6d66; border-radius: 50%; -webkit-animation: item4-r-ac .4s .75s ease-in-out both;}@-webkit-keyframes item4-l-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(3px,3px, 0);} 100% {}}@-webkit-keyframes item4-r-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(-3px,3px, 0);} 100% {}}/*page4 end*//*page5 begin*/.play .item5-1{ top: 41%; left: 50%; 140px; height: 140px; margin-left: -85px; border-radius: 50%; background:-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff)); background-size: 140px 140px; -webkit-animation: item5-1-ac .4s .4s ease-in-out both;}@-webkit-keyframes item5-1-ac{ 0%{ opacity: 0; -webkit-transform:scale(.6);} 100% {}}.play .item5-2{ top: 41%; left: 50%; 95px; height: 190px; margin: -65px 0 0 -52px; background:url(../images/5/item5_2.png) no-repeat 0 0; -webkit-animation: item5-2-ac .4s 1s ease-in-out both; overflow: hidden; background-size: 95px 190px;}@-webkit-keyframes item5-2-ac{ 0%{ background-position: -85px 190px;} 100% { background-position: 0 0;}}.play .item5-3{ top: 41%; left: 50%; 140px; height: 140px; margin-left: -85px; border-radius: 50%; background:url(../images/5/item5_3.png) no-repeat 50%; background-size: 140px 140px; -webkit-animation: item5-3-ac .3s .6s ease-in-out both;}@-webkit-keyframes item5-3-ac{ 0%{ opacity: 0;} 100% {}}/*page5 end*//*page6 begin*/.play .item6-1{ top: 41%; left: 50%; margin: 82px 0 0 4px; 86px; height: 86px; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, from(#f09b45), to(#fc4b88)); -webkit-animation: item6-1-ac .4s ease-in-out both;}@-webkit-keyframes item6-1-ac{ 0%{ opacity: 0; -webkit-transform:translate3d(0,-200px, 0) scale(.3);} 80%{ opacity: 1;-webkit-transform:translate3d(0,0,0) scale(.3);} 100% {}}.play .item6-2{ top: 41%; left: 50%; margin: 82px 0 0 11px; 71px; height: 88px; background: url(../images/6/item6_2.png) no-repeat 50%; background-size: 44px; -webkit-animation: item6-2-ac .4s .4s ease-in-out both;}@-webkit-keyframes item6-2-ac{ 0%{ opacity: 0; -webkit-transform: rotate(172deg);} 100%{}}.play .item6-3{ top: 41%; left: 50%; margin: 121px 0 0 45px; 5px; height: 5px; border: 1px solid #fff; background: #2bd9bb; border-radius: 50%; -webkit-animation: item6-3-ac 2s 1.4s ease-in-out both infinite;}@-webkit-keyframes item6-3-ac{ 0%{ opacity: 0;} 1%{opacity:1;-webkit-transform:translate3d(0,0px, 0);} 20%{opacity: 1; -webkit-transform:translate3d(0,25px, 0); background: #fff;} 21%{ opacity: 0;} 100%{ opacity: 0;}}.item6-4{ position: absolute; top: 5%; left: 50%; 217px; height: 62px; background: url(../images/5/liuliang.png); background-size: 217px 62px; margin: 0 0 0 -108px;}.item6-5{ position: absolute; top: 50%; left: 50%; 16px; height: 16px; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, from(#9057f9), to(#fb78d0)); margin: 0px 0 0 50px; opacity: 0; -webkit-transition: all .6s 1s ease;}.play .item6-5{ opacity: 1; -webkit-transform: translate3d(20px , -20px , 0);}/*page6 end*/
/*page7 begin*/.item7-2,.item7-3,.item7-4,.item7-5,.item7-6{ position: absolute; top: 50%; left: 50%; border-radius: 50%;}.item7-1{ position: absolute; top: 50%; left: 50%; 185px; height: 138px; margin: -158px 0 0 -91px; background: url(../images/last/slogan-0820.png); background-size: 185px 138px;}.item7-2{ position: absolute; top: 50%; left: 50%; 25px; height: 25px; border-radius: 50%; background:-webkit-gradient(linear, left top, left bottom, from(#288dff), to(#53dcff)); margin: -3px 0 0 -137px; opacity: 0; -webkit-transition: all 1s ease .5s;}.play .item7-2{ opacity: 1; -webkit-transform: translate3d(0 , -20px , 0); -webkit-animation: tinyShock 8s 2s linear infinite alternate;}.item7-3{ top: 55% !important; 15px; height: 15px; background:-webkit-gradient(linear, left top, left bottom, from(#ff9332), to(#ffe22d)); margin: 140px 0 0 57px; opacity: 0; -webkit-transition: all 1s ease .5s;}.play .item7-3{ opacity: 1; -webkit-transform: translate3d(0 , -20px , 0); -webkit-animation: tinyShock 9s 1s linear infinite alternate;}.item7-4{ top: 55% !important; 6px; height: 6px; background:-webkit-gradient(linear, left top, left bottom, from(#06d3b3), to(#96ef1a)); margin: 108px 0 0 100px; opacity: 0; -webkit-transition: all 1s ease .5s;}.play .item7-4{ opacity: 1; -webkit-transform: translate3d(0 , -20px , 0); -webkit-animation: tinyShock 10s 1.5s linear infinite alternate;}.item7-5{ 10px; height: 10px; background:-webkit-gradient(linear, left top, left bottom, from(#955cf8), to(#fb7bd1)); margin: -86px 0 0 111px; opacity: 0; -webkit-transition: all 1s ease .5s;}.play .item7-5{ opacity: 1; -webkit-transform: translate3d(0 , -20px , 0); -webkit-animation: tinyShock 12s 3s linear infinite alternate;}.item7-6{ 89px; height: 89px; background:-webkit-gradient(linear, left top, left bottom, from(#ff7171), to(#ff32cc)); margin: -182px 0 0 120px; opacity: 0; -webkit-transition: all 1s ease .5s;}.play .item7-6{ opacity: 1; -webkit-transform: translate3d(0 , -20px , 0); -webkit-animation: tinyShock 7s 1.3s linear infinite alternate;}@-webkit-keyframes tinyShock{ 0%{ -webkit-transform: translate3d( 0 , -20px , 0); } 25%{ -webkit-transform: translate3d( -5px , -5px , 0); } 50%{ -webkit-transform: translate3d( 5px , -5px , 0); } 75%{ -webkit-transform: translate3d( 5px , 5px , 0); } 100%{ -webkit-transform: translate3d( -5px , 5px , 0); }}/*page7 end*//*page8 begin*//* add by cjx */.play .item8-0{ top: 56%; left: 50%; 270px; height: 108px; margin-left: -135px; background: url(../images/8/skin_phone.png) no-repeat; background-size: 270px auto;}.play .item8-1 { top: 50%; left: 50%; 53px; height: 53px; margin-left: -22px; margin-top: -110px; background: url(../images/8/create.png) 15px 8px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(95,212,255,0.9)), to(rgba(47, 145, 255,0.9))); background-size: 21px auto,100% auto; border-radius: 50%; -webkit-animation: 1s 1.4s item8-1-ac both;}@-webkit-keyframes item8-1-ac{ 0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);} 100% {}}.item8-1-1{ display: none;}.play .item8-1-1{ display: inline-block; position: absolute; top: 32px; 50px; left: 6px; color: white; font-size: 10px; font-family: "Microsoft Yahei";}.play .item8-2{ top: 50%; left: 50%; 71px; height: 71px; margin-left: -75px; margin-top: -46px; background:-webkit-gradient(linear, left top, left bottom, from(rgba(118,128,140,1)), to(rgba(64, 63, 89,1))); background-size:100% auto; border-radius: 50%; -webkit-animation: 1s item8-2-ac .6s both;}@-webkit-keyframes item8-2-ac{ 0%{ opacity: 0;-webkit-transform: translate3d(15px,30px,0) scale(.8);} 100% {}}.play .item8-2-1 { display: block; margin: 10px 0 0 30px; 26px; height: 26px; background: #ffe700; border-radius: 50%; -webkit-animation:3s 0.5s item8-2-1-ac alternate infinite ease-in-out;}@-webkit-keyframes item8-2-1-ac{ 0%{} 100% {-webkit-transform: translate3d(-5px,0,0);}}.play .item8-2-2 { display: block; margin: -20px 0 0 14px; 41px; height: 29px; background: url(../images/8/wether_cloud.png) no-repeat; background-size: 100% auto; -webkit-animation:3s 0.5s skin_wether_cloud alternate infinite ease-in-out;}@-webkit-keyframes skin_wether_cloud{ 0%{} 100% {-webkit-transform: translate3d(4px,0,0);}}.item8-2-3{ display: none;}.play .item8-2-3{ display: inline-block; position: absolute; top: 50px; 50px; left: 23px; color: white; font-size: 12px; font-family: "Microsoft Yahei";}.play .item8-3 { top: 50%; left: 50%; 60px; height: 60px; margin-left: -10px; border-radius: 50%; -webkit-animation: 1s 0.2s item8-3-ac both; overflow: hidden; z-index: 5;}@-webkit-keyframes item8-3-ac{ 0%{ opacity: 0;-webkit-transform:translate3d(0,30px,0) scale(.8);} 100% {}}.play .skin_phone { -webkit-animation:0.5s skin_phone; opacity: 1;}@-webkit-keyframes skin_phone{ 0%{ opacity: 0;-webkit-transform: translateY(30px) scale(.8);} 100% { opacity: 1;-webkit-transform: translateY(0px) scale(1);}}.play .skin_moon { -webkit-animation:0.7s 0.4s skin_moon; opacity: 1;}
.play .item8-3-1 { display: block; 100%; height: 100%; background:url(../images/8/cloth_bg.png) center no-repeat; background-size: 30px auto; border-radius: 50%; -webkit-animation: .8s 2s item8-3-1-ac ease-out both;}@-webkit-keyframes item8-3-1-ac{ 0%{ background:url(../images/8/cloth_bg.png) center no-repeat;} 100% { background:url(../images/8/cloth_bg2.png) center no-repeat;}}
.play .item8-3-2{ display: block; 100%; height: 100%; margin-top: -112%; background: url(../images/8/cloth.png) center no-repeat; background-size: 30px auto; -webkit-animation:0.8s 2s item8-3-2-ac ease-out;}@-webkit-keyframes item8-3-2-ac{ 0%{ opacity: 1;} 35%{opacity: 0;} 100%{ opacity: 0; background-position: 200% 50%;}}.play .item8-3-3 { display: block; 100%; height: 100%; margin-top: -100%; background: url(../images/8/cloth.png) center no-repeat; background-size:30px auto; -webkit-animation:0.8s 2s item8-3-3-ac ease-out both; opacity: 0;}@-webkit-keyframes item8-3-3-ac{ 50%{ opacity: 0; background-position: -100% 50%;} 100%{ opacity: 1; background-position: 50% 50%;}}.item8-3-4{ display: none;}.play .item8-3-4{ display: inline-block; position: absolute; top: 40px; left: 19px; color: white; font-size: 12px; font-family: "Microsoft Yahei";}.play .item8-4 { top: 50%; left: 50%; 58px; height: 58px; margin-left: 26px; margin-top: -40px; background: url(../images/8/smile.png) 17px 9px no-repeat,-webkit-gradient(linear, left top, left bottom, from(rgba(255,181,40,0.9)), to(rgba(252, 129, 69,0.9))); background-size: 25px auto,100% auto; border-radius: 50%; -webkit-animation: 1s 1s item8-1-ac both;}@-webkit-keyframes item8-1-ac{ 0%{ opacity: 0;-webkit-transform: translate3d(-10px,50px,0) scale(.8);} 100% {}}.item8-4-1{ display: none;}.play .item8-4-1{ display: inline-block; position: absolute; top: 38px; left: 17px; color: white; font-size: 12px; font-family: "Microsoft Yahei";}.item8-5{ position: absolute; top: 5%; left: 50%; 227px; height: 62px; background: url(../images/8/uc.png); background-size: 227px 62px; margin: 0 0 0 -113px;}
/*底部信息*/#footer_tips{ 280px; height: 18px; padding: 0 4px 0 4px; position: absolute; left: 50%; bottom: 38px !important; margin-left: -140px; border-bottom: 1px solid #babdd4; text-align: center;}#footer_tips a{ font-size: 9.5px; color: #4d558f;}#footer_tips span{ position: absolute; top: 4px; left: 66px; font-size: 12px; color: #babdd4; margin-top: 22px; margin-left: 8px; }#footer_tips :nth-child(1){ float: left;}#footer_tips :nth-child(2){ float: right;}#footer_tips .current { -webkit-transition: all .3s ease .3s; -webkit-backface-visibility: hidden; opacity: 1;}
/*page8 end*//*pageuc begin*/.itemuc-0{ top: 23%; left: 50%; margin: 0 0 0 -150px; 280px; font-size: 13px; color: #686868; line-height: 24px;}.itemuc-0 strong{ font-weight: normal; color: #3095ef;}.itemuc-0 em{ font-style: normal; color: #3095ef;}.itemuc-1{ top:50%; left: 50%; margin: 0 0 0 -50px; 100px; height: 100px; border-radius: 50%; background: url(../images/uc/itemuc_1.png) no-repeat 50%,-webkit-gradient(linear, left top, left bottom, from(#1c87ff), to(#4bdbff)); background-size: 62px auto,100%;}/*pageuc end*/.top{ position: absolute; bottom: 10px; right: 10px; 30px; height: 30px; border-radius: 15px; background: url(../images/top.png) no-repeat 50%,rgba(217,217,217,.8); background-size: 30px 30px,100%;}
</style><div id="slide" class="slide" style="height: 667px;"> <ul id="slide_ul" class="cf">
<li class="" style="opacity: 0; height: 667px; z-index: 20;"> <h1><img width="185px" src="http://wap3.ucweb.com/public/pdia_res/chinese/iphonewap/106/images/0/h1-0820.png"></h1> <p class="item0-1"></p> <p class="item0-2"></p> <p class="item0-3"></p> <p class="item0-4"></p> <p class="item0-5"></p> <p class="item0-6"></p> <p class="item0-7"></p> <p class="item0-8 "></p> <p class="item0-0"></p> <div class="active"> <a class="active-link" > <h4></h4> <h3></h3> </a>
</li>
<li>222222222222222</li>
<li>333</li></ul><div id="slide_point" class="slide-point" style="display: block;"> //右侧 小点 <span class="current"></span> <span class=""></span> <span class=""></span>
</div>
<div id="mybtn" class="mybtn">asd</div>http://wap.uc.cn/packinfo/chinese_999/ucbrowser/pf/41?uc_param_str=vepffrbiuplaei&r=main&from=wap-atb-mobile&plang=<script>function Slide(wrap,cont,point,tag){ this.winW = document.documentElement.clientWidth; this.winH = document.documentElement.clientHeight; this.wrap = document.getElementById(wrap); this.cont = document.getElementById(cont); this.cont_li = this.cont.getElementsByTagName("li"); this.slide_points = document.getElementById(point).getElementsByTagName(tag);
this.startN = 0; this.prev = 1; this.startX = 0; this.startY = 0; this.endX = 0; this.transX = 0; this.transY = 0;}
Slide.prototype = { init:function(){ this.startN = 0; this.cont_li[0].className = 'play'; this.cont_li[0].style.opacity = 1; for(var i=1;i<this.cont_li.length;i++){ this.cont_li[i].style.webkitTransform = 'translate3d(0,'+this.winH+'px,0)'; } this.resize(); this.addHandler(this.wrap,"touchstart",this.bind_fn(this,this.touch_start)); this.addHandler(this.wrap,"touchmove",this.bind_fn(this,this.touch_move)); this.addHandler(this.wrap,"touchend",this.bind_fn(this,this.touch_end)); }, resize : function(){ this.winH = document.documentElement.clientHeight; document.body.style.height=this.wrap.style.height = this.winH+"px";
for(var i=0;i<this.cont_li.length;i++){ this.cont_li[i].style.height = this.winH+'px'; } }, addHandler : function(elem,evtype,fn){ if(elem.attachEvent){ elem.attachEvent('on'+evtype,fn); }else if(elem.addEventListener){ elem.addEventListener(evtype,fn,false); }else{ elem["on"+evtype] = fn; } }, bind_fn : function(obj,func){ return function(){ func.apply(obj,arguments); }; }, touch_start : function(e){ if(!event.touches.length) return; var touch = event.touches[0]; this.startX = touch.pageX; this.startY = touch.pageY; }, touch_move : function(e){ if(!event.touches.length) return; e.preventDefault(); var touch = event.touches[0]; this.transX = this.startX-touch.pageX; this.transY = this.startY-touch.pageY;
if(Math.abs(this.transY)>Math.abs(this.transX)){ this.transY = this.startY-touch.pageY; this.prev = this.transY/Math.abs(this.transY);
var index = this.startN+this.prev; if(typeof this.cont_li[index] != 'undefined'){ this.cont_li[index].style.opacity = 1; this.cont_li[index].style.zIndex = 50; this.cont_li[index].style.webkitTransitionDuration = 0; this.cont_li[index].style.webkitTransform = "translate3d(0,"+(this.prev*this.winH-(this.transY))+"px,0)";
this.cont_li[this.startN].style.zIndex=20; } } }, touch_end : function(){ if(Math.abs(this.transY)>Math.abs(this.transX) && Math.abs(this.transY)>50){ this.cont_li[this.startN].className = ''; this.play(this.startN+this.prev); }else{ this.play(this.startN); } this.transY = this.transX = 0; }, play : function(n){ var _=this; if(n>=this.cont_li.length){ n = this.cont_li.length-1; } if(n<0){ n = 0; } if(typeof this.cont_li[n] != 'undefined'){ this.cont_li[_.startN].style.zIndex = 20; this.cont_li[n].className = 'play'; this.cont_li[n].style.webkitTransitionDuration = '300ms'; this.cont_li[n].style.webkitTransform = 'translate3d(0,0,0)'; this.cont_li[n].style.opacity=1; this.cont_li[n].style.zIndex = 50;
this.slide_point(n);// var download = document.getElementById('mybtn');// console.log(n)// if(n == 7){// download.style.marginTop = '-70px';// }// else{// download.style.marginTop = '0px';// } setTimeout(function(){ _.startN = n; if(_.startN+_.prev>=0 && _.startN+_.prev<=_.cont_li.length){ _.cont_li[_.startN-_.prev].style.opacity = 0; } },300);
} if(n === 0){ document.getElementById('slide_point').style.display = 'none'; }else{ document.getElementById('slide_point').style.display = 'block'; } }, slide_point : function(n){ for(var i=0;i<this.cont_li.length;i++){ this.slide_points[i].className = ""; } this.slide_points[n].className = "current"; }};
var slide1 = new Slide("slide","slide_ul","slide_point","span");slide1.init();
window.onresize = function(){ slide1.resize();};
//圆转动
</script></body></html>