uc 下载页面 记录
2017-08-17 14:42
78 查看
记录一下
<!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; width: 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; width: 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; width: 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; width: 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{ width: 100%; height: 100%; z-index: 1; overflow: hidden; background-size: 320px; } .slide li{ position: absolute; left: 0; top: 0; width: 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; width: 9px; text-align: center; font-size: 0; z-index: 90; -webkit-animation: dis-show 0s ease forwards; } .slide-point span{ margin: 6px auto; width: 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{ width: 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; width: 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{ width: 100%; } /*page0 begin*/ .item0-0{ top: 47%; left: 50%; margin: 33px 0 0 -45px; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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;; width: 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; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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{ width: 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{ width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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%; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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; width: 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{ width: 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{ width: 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%; width: 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%; width: 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; width: 50px; left: 6px; color: white; font-size: 10px; font-family: "Microsoft Yahei"; } .play .item8-2{ top: 50%; left: 50%; width: 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; width: 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; width: 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; width: 50px; left: 23px; color: white; font-size: 12px; font-family: "Microsoft Yahei"; } .play .item8-3 { top: 50%; left: 50%; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 227px; height: 62px; background: url(../images/8/uc.png); background-size: 227px 62px; margin: 0 0 0 -113px; } /*底部信息*/ #footer_tips{ width: 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; width: 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; width: 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; width: 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 != 'undefined'){ this.cont_li[_.startN].style.zIndex = 20; this.cont_li .className = 'play'; this.cont_li .style.webkitTransitionDuration = '300ms'; this.cont_li .style.webkitTransform = 'translate3d(0,0,0)'; this.cont_li .style.opacity=1; this.cont_li .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 .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; width: 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; width: 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; width: 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; width: 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{ width: 100%; height: 100%; z-index: 1; overflow: hidden; background-size: 320px;}.slide li{ position: absolute; left: 0; top: 0; width: 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; width: 9px; text-align: center; font-size: 0; z-index: 90; -webkit-animation: dis-show 0s ease forwards;}.slide-point span{ margin: 6px auto; width: 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{ width: 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; width: 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{ width: 100%;}/*page0 begin*/.item0-0{ top: 47%; left: 50%; margin: 33px 0 0 -45px; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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;; width: 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; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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{ width: 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{ width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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%; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 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%; width: 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%; width: 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; width: 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; width: 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{ width: 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{ width: 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%; width: 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%; width: 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; width: 50px; left: 6px; color: white; font-size: 10px; font-family: "Microsoft Yahei";}.play .item8-2{ top: 50%; left: 50%; width: 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; width: 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; width: 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; width: 50px; left: 23px; color: white; font-size: 12px; font-family: "Microsoft Yahei";}.play .item8-3 { top: 50%; left: 50%; width: 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; width: 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; width: 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; width: 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%; width: 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%; width: 227px; height: 62px; background: url(../images/8/uc.png); background-size: 227px 62px; margin: 0 0 0 -113px;}
/*底部信息*/#footer_tips{ width: 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; width: 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; width: 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; width: 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
!= 'undefined'){ this.cont_li[_.startN].style.zIndex = 20; this.cont_li
.className = 'play'; this.cont_li
.style.webkitTransitionDuration = '300ms'; this.cont_li
.style.webkitTransform = 'translate3d(0,0,0)'; this.cont_li
.style.opacity=1; this.cont_li
.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
.className = "current"; }};
var slide1 = new Slide("slide","slide_ul","slide_point","span");slide1.init();
window.onresize = function(){ slide1.resize();};
//圆转动
</script></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 实现从“环信”下载聊天记录，显示在本地项目页面的功能（二）—— 获取环信聊天记录
- 实现从“环信”下载聊天记录，显示在本地项目页面的功能（一）—— 功能需求介绍
- 实现从“环信”下载聊天记录，显示在本地项目页面的功能（三）—— 将解析后的数据保存到本地DB中
- 关于java下载文件及获取文件路径和截取字符串的一点记录
- 对Guava Cache的封装和使用（包括一个管理页面实现了查看统计信息、情况、查看记录等）
- struts2的jsp页面下载文件
- php删除页面记录 同时刷新页面 删除条件用GET方式获得
- Android Studio插件下载页面和 最完整Android Studio插件整理
- MAC安装并破解PhpStorm-9.0.2 记录（附下载链接）
- SpringMVC学习记录(四)--文件上传与下载
- git 创建新项目，下载工程，合并和更新工程简单应用记录
- 使用一个二维码到达ios和andriod自动跳转到不同的下载页面
- Python爬虫学习记录（1）——百度贴吧图片下载
- php实现当前页面点击下载文件的实例代码
- 通过url中的hash(#)来记录页面状态，用以返回、跳转到特定状态
- 记录问题：ajax返回对象到页面问题以及数据中文乱码问题
- 同页面多记录JS倒计时器
- jsp页面 jsp与servlet url传递参数 Java web下载文件文件名乱码
- YII2 框架访问gii页面404的错误处理记录
- Android Octa源码编译和下载过程详细记录