维多利亚的秘密H5微信营销页面

摩擦出现美女图片的H5轻应用动效典型案例。 Source: http://w.liveapp.cn/auto/index/4063

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1958
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var jsVer = 29;
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth / 640;

var time = new Date;
var start = time.getTime();

(function() {
    var obj = document.getElementsByClassName('m-page');
    for (var j = 0; j < obj.length; j++) {
        if (obj[j].className.indexOf('action') > -1) {
            j++;
            break;
        }
    }

var now = new Date;
    var end = now.getTime();
    var rt = end - start;

start = end;
})

编译

CSS

/* =reset 网页样式重置
------------------------------------------------------------------------------------------------------------------------------*/
/*line*/
/**
 * 箭头指示元件
 * -u-arrow
 */
/*封面手引*/
/*地图跳动*/
/**
 * 模版提示的样式以及动画
 */
/*云*/
/*播放按钮*/

@charset "utf-8";
html {
    font-size: 1em;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight: rgba(0, 0, 0, 0);
    -webkit-text-size-adjust: none;
    overflow: -moz-scrollbars-vertical;
}
body {
    font-size: 0.75em;
}
label {
    cursor: pointer;
}
a:link,
a:visited {
    text-decoration: none;
}
input:focus {
    outline: none;
}
input,
button,
select,
textarea {
    outline: none;
}
textarea {
    resize: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
textarea,
input,
select {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
blockquote,
big,
body,
center,
canvas,
caption,
cite,
code,
command,
datalist,
dd,
del,
details,
dfn,
dl,
div,
dt,
em,
embed,
fieldset,
figcaption,
figure,
font,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
keygen,
label,
legend,
li,
meter,
nav,
menu,
object,
ol,
output,
p,
pre,
progress,
q,
s,
samp,
section,
small,
span,
source,
strike,
strong,
sub,
sup,
table,
tbody,
tfoot,
thead,
th,
tr,
tdvideo,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
}
article,
aside,
footer,
header,
hgroup,
nav,
section,
figure,
figcaption {
    display: block;
}
h1,
h2,
h3,
h4,
h5,
h6,
th,
td,
table,
input,
button,
select,
textarea,
sub {
    font-size: 1em;
}
body,
input,
button,
select,
textarea,
sub {
    font-family: Arial, sans-serif;
}
em,
cite,
address,
optgroup {
    font-style: normal;
}
kbd,
samp,
code {
    font-family: monospace;
}
img,
input,
button,
select,
textarea {
    vertical-align: middle;
    outline: none;
}
ul,
ol {
    list-style: none;
}
img,
fieldset {
    border: 0;
}
abbr,
acronym {
    cursor: help;
    border-bottom: 1px dotted black;
}
table {
    width: 100%;
    border-spacing: 0;
    border: 0;
}
table th,
table td {
    border: 0;
}
legend,
hr {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
legend,
hr,
caption {
    visibility: hidden;
    font-size: 0;
    width: 0;
    height: 0;
    line-height: 0;
}
* {
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    -ms-transition-timing-function: ease-in-out;
    -o-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
html {
    height: 100%;
}
body {
    position: relative;
    font-family: "微软雅黑";
    width: 640px;
    max-width: 640px;
    min-width: 640px;
    height: 100%;
    margin: 0 auto;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body em {
    font-weight: normal;
}
textarea:focus,
input:focus {
    border: 1px solid #71b643;
}
.css_sprite01 {
    background-image: url(/uploads/150801/css_sprite01.png) !important;
    background-repeat: no-repeat !important;
}
.f-ofh {
    overflow: hidden;
    height: 100% !important;
}
.f-hide {
    display: none !important;
}
.f-tc {
    text-align: center;
}
.f-tr {
    text-align: right;
}
.f-fl {
    float: left;
}
.f-fr {
    float: right;
}
.f-fixed {
    position: fixed;
}
.f-cur {
    cursor: pointer;
}
.s-bg-ddd {
    background: #ddd;
}
.alert-loading .logoText {
    font-size: 27px;
    position: absolute;
    top: 101px;
    left: -17px;
    color: #5fb336;
    display: block;
    text-align: center;
    letter-spacing: 4px;
}
.u-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -3;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
}
.alert-loading {
    position: absolute;
    top: 28px;
    left: 28px;
    z-index: -2;
    width: 94px;
    height: 85px;
}
.alert-loading .cycleWrap,
.alert-loading .lineWrap {
    position: absolute;
    width: 94px;
    height: 85px;
}
.alert-loading .cycle,
.alert-loading .line {
    display: block;
    position: absolute;
    background: #6eae44;
}
.alert-loading .cycle {
    z-index: 10;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.alert-loading .cycle-1 {
    right: 0;
    bottom: 0;
}
.alert-loading .cycle-2 {
    left: 0;
    bottom: 0;
}
.alert-loading .cycle-3 {
    left: 50%;
    top: 0;
    margin-left: -9px;
}
.alert-loading .cycle-4 {
    right: 18px;
    top: 50%;
    margin-top: -8px;
}
.alert-loading .line {
    z-index: 9;
    height: 5px;
    border-radius: 3px;
}
.alert-loading .line-1 {
    right: 9px;
    bottom: 6px;
    width: 78px;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: 0;
    -moz-transform-origin: 0;
    transform-origin: 0;
}
.alert-loading .line-2 {
    left: 8px;
    bottom: 4px;
    width: 80px;
    -webkit-transform: rotate(-60deg) scale(0, 1);
    -moz-transform: rotate(-60deg) scale(0, 1);
    transform: rotate(-60deg) scale(0, 1);
    -webkit-transform-origin: 0;
    -moz-transform-origin: 0;
    transform-origin: 0;
}
.alert-loading .line-3 {
    left: 47px;
    top: 7px;
    width: 40px;
    /*动画*/
    
    -webkit-transform: rotate(60deg) scale(0, 1);
    -moz-transform: rotate(60deg) scale(0, 1);
    transform: rotate(60deg) scale(0, 1);
    -webkit-transform-origin: 0;
    -moz-transform-origin: 0;
    transform-origin: 0;
}
.alert-loading.z-move .cycle-1 {
    -webkit-animation: cycleChange 3s infinite ease-in-out;
    moz-animation: cycleChange 3s infinite ease-in-out;
    animation: cycleChange 3s infinite ease-in-out;
}
.alert-loading.z-move .cycle-2 {
    -webkit-animation: cycleChange 3s 0.525s infinite ease-in-out;
    moz-animation: cycleChange 3s 0.525s infinite ease-in-out;
    animation: cycleChange 3s 0.525s infinite ease-in-out;
}
.alert-loading.z-move .cycle-3 {
    -webkit-animation: cycleChange 3s 1.05s infinite ease-in-out;
    moz-animation: cycleChange 3s 1.05s infinite ease-in-out;
    animation: cycleChange 3s 1.05s infinite ease-in-out;
}
.alert-loading.z-move .cycle-4 {
    -webkit-animation: cycleChange 3s 1.575s infinite ease-in-out;
    moz-animation: cycleChange 3s 1.575s infinite ease-in-out;
    animation: cycleChange 3s 1.575s infinite ease-in-out;
}
.alert-loading.z-move .line-1 {
    -webkit-animation: lineChange01 3s infinite ease-in-out;
    moz-animation: lineChange01 3s infinite ease-in-out;
    animation: lineChange01 3s infinite ease-in-out;
}
.alert-loading.z-move .line-2 {
    -webkit-animation: lineChange02 3s 0.525s infinite ease-in-out;
    moz-animation: lineChange02 3s 0.525s infinite ease-in-out;
    animation: lineChange02 3s 0.525s infinite ease-in-out;
}
.alert-loading.z-move .line-3 {
    -webkit-animation: lineChange03 3s 1.05s infinite ease-in-out;
    moz-animation: lineChange03 3s 1.05s infinite ease-in-out;
    animation: lineChange03 3s 1.05s infinite ease-in-out;
}
@-webkit-keyframes cycleChange {
    0%, 24%, 100% {
        -webkit-transform: scale(0);
    }
    9% {
        -webkit-transform: scale(1.2);
    }
}
@-moz-keyframes cycleChange {
    0%, 24%, 100% {
        -moz-transform: scale(0);
    }
    9% {
        -moz-transform: scale(1.2);
    }
}
@keyframes cycleChange {
    0%, 24%, 100% {
        transform: scale(0);
    }
    9% {
        transform: scale(1.2);
    }
}
@-webkit-keyframes lineChange01 {
    0% {
        -webkit-transform: translate(76px, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: translate(0, 0) scale(0, 1);
    }
}
@-moz-keyframes lineChange01 {
    0% {
        -webkit-transform: translate(76px, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: translate(, 0) scale(0, 1);
    }
}
@keyframes lineChange01 {
    0% {
        -webkit-transform: translate(76px, 0) scale(0, 1) scale(0, 1);
    }
    18.75% {
        -webkit-transform: translate(0, 0) scale(1, 1) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: translate(0, 0) scale(0, 1) scale(0, 1);
    }
}
@-webkit-keyframes lineChange02 {
    0% {
        -webkit-transform: rotate(-60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(-60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(-60deg) translate(78px, 0) scale(0, 1);
    }
}
@-moz-keyframes lineChange02 {
    0% {
        w-webkit-transform: rotate(-60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(-60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(-60deg) translate(78px, 0) scale(0, 1);
    }
}
@keyframes lineChange02 {
    0% {
        -webkit-transform: rotate(-60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(-60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(-60deg) translate(78px, 0) scale(0, 1);
    }
}
@-webkit-keyframes lineChange03 {
    0% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(60deg) translate(40px, 0) scale(0, 1);
    }
}
@-moz-keyframes lineChange03 {
    0% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(60deg) translate(40px, 0) scale(0, 1);
    }
}
@keyframes lineChange03 {
    0% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(0, 1);
    }
    18.75% {
        -webkit-transform: rotate(60deg) translate(0, 0) scale(1, 1);
    }
    37.5%,
    100% {
        -webkit-transform: rotate(60deg) translate(40px, 0) scale(0, 1);
    }
}
.u-arrow {
    width: 90px;
    height: 90px;
    background: black;
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -38px;
    border-radius: 45px;
    opacity: 0.5;
    z-index: 10000;
}
.u-arrow .u-guideTop {
    width: 40px;
    height: 50px;
    background: url(/uploads/150801/units-icons.png) -67px 0px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    margin-left: -20px;
    display: block;
    z-index: 9998;
}
.u-guideTop.z-move {
    -webkit-animation: guideTop 1.5s infinite;
}
@-webkit-keyframes guideTop {
    0% {
        -webkit-transform: translateY(42px);
        opacity: 0;
    }
    60% {
        -webkit-transform: translateY(12px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 0;
    }
}
.u-arrow p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -14px 0 0 -25px;
    /**
 * 声音元件
 * -u-audio
 */
    
    width: 50px;
    height: 28px;
    background-position: 0 -82px;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}
.u-audio {
    position: absolute;
    top: 40px;
    right: 0;
    width: 132px;
    height: 73px;
    z-index: 200;
}
.u-audio .res_audio {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    height: 0;
    width: 0;
}
.u-audio .btn_audio {
    width: 100%;
    padding-top: 29px;
    height: 44px;
}
.u-audio .btn_audio strong,
.u-audio .btn_audio .audio_open {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
}
.u-audio .btn_audio strong {
    width: 57px;
    font-size: 24px;
    color: #fff;
    opacity: 1;
}
.u-audio .btn_audio .audio_open {
    position: absolute;
    bottom: 0;
    left: 56px;
    width: 44px;
}
.u-audio .btn_audio strong.z-hide {
    opacity: 0;
}
.u-audio .btn_audio strong.z-move {
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.u-audio.z-low {
    z-index: 1;
}
.u-pageLoading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
}
.u-pageLoading img {
    /**
 * 提示小纸条
 * -u-note
 */
    
    position: absolute;
    top: 40%;
    left: 50%;
    height: 100px;
    width: 100px;
    margin: -50px 0 0 -50px;
}
.u-note {
    position: fixed;
    left: 120px;
    top: 50%;
    margin-top: -40px;
    width: 400px;
    padding: 15px 0;
    text-align: center;
    font-size: 26px;
    border-radius: 8px;
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.u-note-error {
    background: #f48813;
}
.u-note-sucess {
    background: #55e224;
}
.u-note.on {
    opacity: 1;
    z-index: 99;
}
.p-ct {
    position: relative;
    width: 640px;
    height: 100%;
    overflow: hidden;
}
.p-ct.fixed {
    overflow: hidden;
}
.translate-front {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.translate-front .mengban-warn {
    position: absolute;
}
.translate-front.z-show {
    opacity: 1;
}
.translate-back {
    position: relative;
    width: 100%;
    height: 100%;
}
.m-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    background: #ddd;
}
.m-page .page-con {
    position: relative;
    width: 100%;
    height: 101%;
    overflow: hidden;
}
.m-page.active {
    z-index: 40;
}
.m-page.fixed {
    position: fixed;
}
.m-page.move {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.bigTxt-bd,
.bigTxt-arrow,
.bigTxt-detail,
.bigTxt-detail p {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.bigTxt-bd {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 450px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    opacity: 0;
    -webkit-transform: translate(200px, 0);
    -moz-transform: translate(200px, 0);
    -ms-transform: translate(200px, 0);
    -o-transform: translate(200px, 0);
    transform: translate(200px, 0);
}
.bigTxt-bd p {
    padding: 0 65px 0 25px;
    color: #000;
}
.bigTxt-title {
    width: 100%;
    padding: 25px 0;
    overflow: hidden;
    font-size: 28px;
}
.bigTxt-title p {
    height: 100%;
    line-height: 130%;
    overflow: hidden;
}
.bigTxt-arrow {
    position: absolute;
    bottom: 5px;
    right: 20px;
    display: inline-block;
    width: 34px;
    height: 34px;
    background-position: 0 -46px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}
.bigTxt-detail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.bigTxt-detail p {
    width: 400px;
    overflow: hidden;
    padding: 25px;
    line-height: 150%;
    font-size: 24px;
    border-top: 2px solid #fff;
}
.bigTxt-btn {
    position: absolute;
    bottom: 120px;
    left: 12%;
    width: 480px;
    height: 100px;
    background-size: auto !important;
}
.bigTxt-btn a {
    display: inline-block;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 36px;
    color: #000;
    letter-spacing: 0.2em;
}
.bigTxt-weixin {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
}
.bigTxt-weixin img {
    max-width: 100%;
}
.bigTxt-weixin.z-show {
    display: block;
}
.bigTxt-arrow.z-toggle {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg);
}
.bigTxt-detail.z-show p,
.z-animate .bigTxt-bd {
    /**
 * 小图文模块
 * -m-samllTxt
 */
    
    opacity: 1;
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
}
.smallTxt-bd {
    position: relative;
    height: 50%;
    width: 100%;
}
.smallTxt-bd p {
    padding: 0 25px;
    color: #000;
}
.smallTxt-bd:first-child {
    border-bottom: 2px solid #fff;
}
.smallTxt-bd:last-child {
    height: 50%;
}
.smallTxt-bd.action {
    z-index: 10;
}
.bd-wrap,
.smallTxt-arrow,
.smallTxt-detail,
.smallTxt-detail p {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.bd-wrap {
    position: absolute;
    z-index: 20;
    width: 400px;
    overflow: hidden;
    border-radius: 12px;
    font-size: 24px;
    opacity: 0;
}
.smallTxt-title {
    width: 100%;
    padding: 25px 0;
    overflow: hidden;
    font-size: 28px;
    background: rgba(255, 255, 255, 0.7);
}
.smallTxt-title p {
    height: 100%;
    line-height: 130%;
    overflow: hidden;
}
.smallTxt-arrow {
    position: absolute;
    bottom: 5px;
    display: inline-block;
    width: 34px;
    height: 34px;
    background-position: 0 -46px;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
}
.smallTxt-detail {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
}
.smallTxt-detail p {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    line-height: 150%;
    padding: 25px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
}
.smallTxt-bd:first-child .bd-wrap {
    top: 30px;
}
.smallTxt-bd:first-child .smallTxt-title {
    top: 0;
}
.smallTxt-bd:first-child .smallTxt-detail {
    top: 150px;
}
.smallTxt-bd:first-child .smallTxt-detail p {
    border-top: 2px solid #fff;
}
.smallTxt-bd:last-child .bd-wrap {
    bottom: 120px;
}
.smallTxt-bd:last-child .smallTxt-title {
    bottom: 0;
}
.smallTxt-bd:last-child .smallTxt-detail {
    bottom: 150px;
}
.smallTxt-bd:last-child .smallTxt-detail p {
    border-bottom: 2px solid #fff;
}
.z-left .bd-wrap {
    left: 30px;
    -webkit-transform: translate(200px, 0);
    -moz-transform: translate(200px, 0);
    -ms-transform: translate(200px, 0);
    -o-transform: translate(200px, 0);
    transform: translate(200px, 0);
}
.z-right .bd-wrap {
    right: 30px;
    -webkit-transform: translate(-200px, 0);
    -moz-transform: translate(-200px, 0);
    -ms-transform: translate(-200px, 0);
    -o-transform: translate(-200px, 0);
    transform: translate(-200px, 0);
}
.z-left .bd-wrap .smallTxt-title p {
    padding: 0 65px 0 25px;
}
.z-right .bd-wrap .smallTxt-title p {
    padding: 0 25px 0 65px;
}
.z-left .bd-wrap .smallTxt-arrow {
    right: 20px;
}
.z-right .bd-wrap .smallTxt-arrow {
    left: 20px;
}
.smallTxt-arrow.z-toggle {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -ms-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg);
}
.z-animate .bd-wrap,
.smallTxt-detail.z-show p {
    /**
 * 视频模块
 * -m-video
 */
    
    opacity: 1;
    -webkit-transform: translate(0, 0) !important;
    -moz-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    -o-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
}
.video-title {
    width: 580px;
    padding: 200px 30px 50px;
    margin-bottom: 50px;
    overflow: hidden;
    opacity: 0;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.video-title h3 {
    height: 48px;
    overflow: hidden;
    font-size: 48px;
    margin-bottom: 30px;
    line-height: 100%;
}
.video-title p {
    height: 30px;
    overflow: hidden;
    font-size: 30px;
    line-height: 150%;
    line-height: 100%;
}
.video-con {
    position: relative;
    width: 640px;
    height: 400px;
    background: #000;
}
.video-con .img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
}
.video-con .img span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 77px;
    height: 77px;
    margin-left: -38px;
    margin-top: -38px;
    z-index: 11;
    background-position: 0 -233px;
    -webkit-animation: video_btnPlay 1s linear infinite;
    opacity: 1;
    -moz-animation: video_btnPlay 1s linear infinite;
    opacity: 1;
    animation: video_btnPlay 1s linear infinite;
    opacity: 1;
}
.z-animate .video-title {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.video-con .video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.video-con .video .videoClose {
    width: 100px;
    height: 100px;
    background: rgba(255, 0, 0, .6);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: -30px;
    right: -30px;
    -webkit-transition: all 0.6s 0.4s;
    -moz-transition: all 0.6s 0.4s;
    -ms-transition: all 0.6s 0.4s;
    -o-transition: all 0.6s 0.4s;
    transition: all 0.6s 0.4s;
    -webkit-transform: translate(100%, -100%);
    -moz-transform: translate(100%, -100%);
    -ms-transform: translate(100%, -100%);
    -o-transform: translate(100%, -100%);
    transform: translate(100%, -100%);
}
.video-con .video .videoClose::after,
.video-con .video .videoClose::before {
    width: 42px;
    height: 4px;
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    position: absolute;
    bottom: 35px;
    left: 15px;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.video-con .video .videoClose::before {
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.video-con .video .videoWrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 480px;
    margin-left: -320px;
    margin-top: -240px;
}
.video-con .video .videoWrap video,
.video-con .video .videoWrap iframe {
    width: 100%;
    height: 100%;
}
.video-con .video.z-show {
    opacity: 1;
}
.video-con .video.z-show .videoClose {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.book-bd {
    position: relative;
    height: 100%;
    padding: 0 40px;
}
.book-bd .bd-map {
    position: relative;
    height: 250px;
    overflow: hidden;
    -webkit-transform: translate(0, -250px);
    -moz-transform: translate(0, -250px);
    -ms-transform: translate(0, -250px);
    -o-transform: translate(0, -250px);
    transform: translate(0, -250px);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.book-bd .bd-map span {
    position: absolute;
    top: 70px;
    right: 100px;
    display: inline-block;
    width: 55px;
    height: 72px;
    background-position: 0 -159px;
}
.book-bd .bd-map .map-animate {
    position: absolute;
    top: 140px;
    right: 119px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    -webkit-transform: rotateX(-110deg);
    -moz-transform: rotateX(-110deg);
    transform: rotateX(-110deg);
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    transform-origin: 50%;
}
.book-bd .bd-map .map-animate strong {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -11px 0 0 -11px;
    border: 2px solid #fff;
    border-radius: 50%;
}
.book-bd .bd-map .map-animate strong:nth-child(1) {
    -webkit-animation: mapJump 1s linear infinite;
    -moz-animation: mapJump 1s linear infinite;
    animation: mapJump 1s linear infinite;
}
.book-bd .bd-map .map-animate strong:nth-child(2) {
    -webkit-animation: mapJump 1.5s 0.75s linear infinite;
    -moz-animation: mapJump 1.5s 0.75s linear infinite;
    animation: mapJump 1.5s 0.75s linear infinite;
}
.book-bd .bd-tit {
    position: absolute;
    top: 50%;
    height: 40px;
    line-height: 40px;
    width: 560px;
    margin-top: -160px;
    overflow: hidden;
    color: #fff;
    font-size: 36px;
    opacity: 0;
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0.1);
    -ms-transform: scale(0.1);
    -o-transform: scale(0.1);
    transform: scale(0.1);
    -webkit-transition: all 0.5s 0.5s;
    -moz-transition: all 0.5s 0.5s;
    -ms-transition: all 0.5s 0.5s;
    -o-transition: all 0.5s 0.5s;
    transition: all 0.5s 0.5s;
}
.book-bd .bd-form {
    position: absolute;
    bottom: 120px;
    left: 40px;
    width: 480px;
    padding: 30px 40px;
    background: #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    -webkit-transform: translate(0, 500px);
    -moz-transform: translate(0, 500px);
    -ms-transform: translate(0, 500px);
    -o-transform: translate(0, 500px);
    transform: translate(0, 500px);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.book-bd .bd-form p {
    position: relative;
    padding-left: 70px;
    margin-bottom: 20px;
    text-align: left;
}
.book-bd .bd-form p a {
    font-size: 30px;
    color: #34495e;
}
.book-bd .bd-form p span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 32px;
    height: 29px;
}
.book-bd .bd-form .tel span {
    background-position: -72px 0;
}
.book-bd .bd-form .email span {
    background-position: -72px -31px;
}
.book-bd .bd-form .wx span {
    background-position: -72px -62px;
}
.book-bd .bd-form .btn {
    width: 420px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    text-align: center;
    color: #34495e;
    background: #e67e22;
    border-radius: 12px;
    font-size: 36px;
}
.book-bd .bd-form .btn.z-stop {
    background: #bbb;
}
.book-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    -webkit-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -ms-transition: background 0.5s;
    -o-transition: background 0.5s;
    transition: background 0.5s;
}
.book-bg.z-show {
    background: rgba(0, 0, 0, 0.7);
}
.book-form {
    position: absolute;
    top: 50%;
    left: 40px;
    z-index: 50;
    width: 480px;
    height: 700px;
    padding: 40px;
    margin-top: -350px;
    background: #e5e5e5;
    border-radius: 12px;
    opacity: 0;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.book-form h3 {
    margin-bottom: 15px;
    color: #34495e;
    font-size: 36px;
    text-align: center;
}
.book-form th,
.book-form td {
    padding: 13px 0;
}
.book-form th {
    font-size: 30px;
    color: #34495e;
    white-space: nowrap;
}
.book-form td input {
    width: 260px;
    border: 1px solid #ccc;
    padding: 12px 0 12px 30px;
    font-size: 24px;
    color: #34495e;
    border-radius: 6px;
}
.book-form td input.z-error {
    border-color: red;
}
.book-form td.btn p {
    width: 420px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    text-align: center;
    color: #34495e;
    background: #e67e22;
    border-radius: 12px;
    font-size: 36px;
}
.book-form td.btn p.z-fial {
    background: #aaa;
}
.book-form td.btn p.z-success {
    background: #e74c3c;
}
.book-form .sex {
    overflow: hidden;
}
.book-form .sex p {
    float: left;
    overflow: hidden;
    height: 100%;
    width: 130px;
    cursor: pointer;
}
.book-form .sex p span {
    display: block;
    float: left;
    margin-right: 10px;
    font-size: 30px;
}
.book-form .sex p .select {
    padding: 4px;
    margin-right: 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #aaa;
    background: #f8f9f8;
}
.book-form .sex p .select strong {
    display: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background: #6a6a6a;
}
.book-form .sex p .select strong.open {
    display: block;
}
.book-form .j-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 44px;
    height: 44px;
}
.book-form.z-show,
.z-animate .book-bd .bd-map,
.z-animate .book-bd .bd-form {
    opacity: 1;
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    -ms-transform: translate(0, 0) scale(1);
    -o-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
}
.z-animate .book-bd .bd-tit {
    /*销售入口****/
    
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.market-notice {
    position: absolute;
    left: 0;
    z-index: 9;
    bottom: 0px;
    height: 50px;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(100px);
    -moz-transform: translateY(100px);
    -ms-transform: translateY(100px);
    -o-transform: translateY(100px);
    transform: translateY(100px);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.market-notice img {
    display: inline-block;
    width: 640px;
}
.market-notice.show {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.market-page {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10;
    opacity: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
.market-page.show {
    opacity: 1;
}
.market-img {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 500px;
    width: 640px;
    margin-left: -320px;
    background-image: url(/template/20/res/img/market-bk.jpg);
    background-repeat: no-repeat;
    -webkit-transform: translateY(500px);
    -moz-transform: translateY(500px);
    -ms-transform: translateY(500px);
    -o-transform: translateY(500px);
    transform: translateY(500px);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.market-img a:nth-of-type(1) {
    position: absolute;
    top: 220px;
    left: 40px;
}
.market-img a:nth-of-type(2) {
    position: absolute;
    top: 350px;
    left: 40px;
    width: 560px;
    height: 90px;
}
.market-img.show {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
.lazy-img,
.lazy-finish {
    background-size: auto !important;
    background-repeat: no-repeat;
    background-position: top left !important;
}
.coffee-steam-box {
    display: none;
}
.m-imgBox {
    height: 380px;
    width: 640px;
}
.ylmap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    overflow: hidden;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -ms-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
.ylmap.mapOpen {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.ylmap.show {
    display: block;
}
.ylmap .bk {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: -1;
    background: #efebed;
}
.ylmap .bk span {
    display: inline-block;
    margin-top: 48%;
    width: 59px;
    height: 49px;
    background-position: -72px -93px;
}
.ylmap .tit p a span {
    background-position: -72px -144px;
}
@-webkit-keyframes start {
    0%, 30% {
        opacity: 0;
        -webkit-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -8px);
    }
}
@-moz-keyframes start {
    0%, 30% {
        opacity: 0;
        -moz-transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0, -8px);
    }
}
@keyframes start {
    0%, 30% {
        opacity: 0;
        transform: translate(0, 10px);
    }
    60% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(0, -8px);
    }
}
@keyframes fengJump {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-40px);
    }
    50% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-15px);
    }
    80% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
    }
}
@-webkit-keyframes fengJump {
    0% {
        -webkit-transform: translateY(0);
    }
    20% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-40px);
    }
    50% {
        -webkit-transform: translateY(0);
    }
    60% {
        -webkit-transform: translateY(-15px);
    }
    80% {
        -webkit-transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@-moz-keyframes fengJump {
    0% {
        -moz-transform: translateY(0);
    }
    20% {
        -moz-transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-40px);
    }
    50% {
        -moz-transform: translateY(0);
    }
    60% {
        -moz-transform: translateY(-15px);
    }
    80% {
        -moz-transform: translateY(0);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-ms-keyframes fengJump {
    0% {
        -ms-transform: translateY(0);
    }
    20% {
        -ms-transform: translateY(0);
    }
    40% {
        -ms-transform: translateY(-40px);
    }
    50% {
        -ms-transform: translateY(0);
    }
    60% {
        -ms-transform: translateY(-15px);
    }
    80% {
        -ms-transform: translateY(0);
    }
    100% {
        -ms-transform: translateY(0);
    }
}
@-o-keyframes fengJump {
    0% {
        -o-transform: translateY(0);
    }
    20% {
        -o-transform: translateY(0);
    }
    40% {
        -o-transform: translateY(-40px);
    }
    50% {
        -o-transform: translateY(0);
    }
    60% {
        -o-transform: translateY(-15px);
    }
    80% {
        -o-transform: translateY(0);
    }
    100% {
        -o-transform: translateY(0);
    }
}
@keyframes mapJump {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }
    90% {
        transform: scale(2);
        opacity: 0.9;
    }
    100% {
        transform: scale(2);
        opacity: 1;
    }
}
@-webkit-keyframes mapJump {
    0% {
        -webkit-transform: scale(0.1);
        opacity: 0;
    }
    90% {
        -webkit-transform: scale(2);
        opacity: 0.9;
    }
    100% {
        -webkit-transform: scale(2);
        opacity: 1;
    }
}
@-moz-keyframes mapJump {
    0% {
        -moz-transform: scale(0.1);
        opacity: 0;
    }
    90% {
        -moz-transform: scale(2);
        opacity: 0.9;
    }
    100% {
        -moz-transform: scale(2);
        opacity: 1;
    }
}
.m-alert strong {
    font-size: 35px;
    opacity: 0;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    transition: opacity 0.8s;
}
.m-alert strong.z-show {
    opacity: 1;
}
.scene {
    position: relative;
    display: block;
    width: 300px;
    height: 200px;
    margin: 0 auto;
}
.plane,
.cloud {
    position: absolute;
}
.plane {
    display: block;
    margin: 0 auto;
    left: 30%;
    -webkit-animation: anim-plane 1s linear infinite alternate forwards;
    -moz-animation: anim-plane 1s linear infinite alternate forwards;
    animation: anim-plane 1s linear infinite alternate forwards;
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    transform: translateY(80px);
}
.cloud {
    display: block;
    height: 40px;
    width: 53px;
    margin: 0 auto;
    -webkit-animation: 10s linear infinite normal both;
    -moz-animation: 10s linear infinite normal both;
    animation: 10s linear infinite normal both;
    -webkit-animation-name: move, fade;
    -moz-animation-name: move, fade;
    animation-name: move, fade;
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iY2xvdWQiIHZpZXdCb3g9IjAgMCA1MiA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MnB4IiBoZWlnaHQ9IjQwcHgiPgoJPGRlZnM+CgkJPGZpbHRlciBpZD0iZjEiIHg9Ii0xMDAlIiB5PSItMTAwJSIgd2lkdGg9IjMwMCUiIGhlaWdodD0iMzAwJSI+IAoJCQk8ZmVPZmZzZXQgcmVzdWx0PSJvdXQiIGluPSJTb3VyY2VHcmFwaGljIiBkeD0iMCIgZHk9IjEiLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSJvdXQiIGluPSJvdXQiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjQgMCIvPgoJCQk8ZmVHYXVzc2lhbkJsdXIgcmVzdWx0PSJvdXQiIGluPSJvdXQiIHN0ZERldmlhdGlvbj0iMiIvPgoJCQk8ZmVCbGVuZCBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJvdXQiIG1vZGU9Im5vcm1hbCIgcmVzdWx0PSJkcCIvPgoJCTwvZmlsdGVyPgoJPC9kZWZzPiAKCTxwYXRoIGlkPSJmZy1jbG91ZCIgZmlsdGVyPSJ1cmwoI2YxKSIgZD0iTTYuMyAzNS4xQzQuNyAzNC4yLTAuNCAzMi4zIDEuNCAyNSAzLjEgMTguMSA4LjcgMTkuNSA4LjcgMTkuNSA4LjcgMTkuNSAzLjIgMTQuMSAxMC40IDYuOCAxNi45IDAuMiAyMy4xIDQuNiAyMy4xIDQuNiAyMy4xIDQuNiAzMC0xLjcgMzUuMiAyLjQgNDQuNiA5LjcgNDIuOCAyNS4zIDQyLjggMjUuMyA0Mi44IDI1LjMgNDggMjIuNiA0OS44IDI4LjYgNTEgMzIuNyA0NiAzNS44IDQyLjggMzYuNyAzOS43IDM3LjUgOC45IDM2LjYgNi4zIDM1LjFaIiBzdHJva2U9IiNjY2NjY2MiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0iI2ZmZmZmZiIvPgo8L3N2Zz4=);
}
.cloud--small {
    top: 65px;
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
}
.cloud--medium {
    top: 95px;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
}
.cloud--large {
    top: 95px;
    -webkit-animation-duration: 4.5s;
    -moz-animation-duration: 4.5s;
    animation-duration: 4.5s;
    /*飞机*/
    
    -webkit-animation-delay: 2.5s;
    -moz-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}
@keyframes anim-plane {
    to {
        transform: translateY(95px);
    }
}
@-webkit-keyframes anim-plane {
    to {
        -webkit-transform: translateY(95px);
    }
}
@-moz-keyframes anim-plane {
    to {
        -moz-transform: translateY(95px);
    }
}
@keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes move {
    from {
        left: 200px;
    }
    to {
        left: 0px;
    }
}
@-webkit-keyframes move {
    from {
        left: 200px;
    }
    to {
        left: 0px;
    }
}
@-moz-keyframes move {
    from {
        left: 200px;
    }
    to {
        left: 0px;
    }
}
@-webkit-keyframes video_btnPlay {
    0% {
        -webkit-transform: scale(1);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: scale(2);
        opacity: 0.3;
    }
}
@-moz-keyframes video_btnPlay {
    0% {
        -moz-transform: scale(1);
        opacity: 0.8;
    }
    100% {
        -moz-transform: scale(2);
        opacity: 0.3;
    }
}
@keyframes video_btnPlay {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(2);
        opacity: 0.3;
    }
}

HTML

<section class="u-alert">
    <img style='display:none;' src="/uploads/150801/loading_large.gif" />
    <div class='alert-loading z-move'>
        <div class='cycleWrap'>
            <span class='cycle cycle-1'></span>
            <span class='cycle cycle-2'></span>
            <span class='cycle cycle-3'></span>
            <span class='cycle cycle-4'></span>
        </div>
        <div class="lineWrap">
            <span class='line line-1'></span>
            <span class='line line-2'></span>
            <span class='line line-3'></span>
        </div>
        <span class="logoText">LiveApp</span>
    </div>
</section>
<section class='u-audio f-hide' data-src='/uploads/150801/sexy.mp3'>
    <p id='coffee_flow' class="btn_audio">
        <strong class='txt_audio z-hide'>关闭</strong>
        <span class='css_sprite01 audio_open'></span>
    </p>
</section>
<section class='u-arrow f-hide'>
    <a href="javascript:void(0);" class="u-guideTop z-move"></a>
</section>
<section class='p-ct'>
    <div id="j-mengban" class='translate-front' data-open="1">
        <div class='mengban-warn'></div>
    </div>
    <div class='translate-back f-hide'>
        <input id="ca-tips" type="hidden" value="" />
        <input id="r-cover" type="hidden" value='/uploads/150801/53aa327a505ff.jpg' />
        <div class='m-page m-fengye f-hide' data-page-type='info_pic3' data-statics='info_pic3'>
            <div class="page-con lazy-img" data-src='/uploads/150801/53b24fc7db82542132.jpg'></div>
        </div>
        <div class='m-page m-video f-hide' data-page-type='video' data-statics='video_list'>
            <div class="page-con lazy-img" data-src='/uploads/150801/53aa327a505ff.jpg'>
                <div class="video-title" style='color:#ff005e;'>
                    <h3 class='f-tc'></h3>
                </div>
                <div class="video-con j-video" data-video-type="bendi" data-video-src="/uploads/150801/53aa4a607911b42133.mp4">
                    <div class="img lazy-img" data-src='/uploads/150801/53b256a43e1b842133.jpg'>
                        <span class="css_sprite01"></span>
                    </div>
                    <div class="u-maskLayer video f-hide">
                        <div class="videoClose">
                            <a href="javascript:void(0);" class="u-maskLayer-close"></a>
                        </div>
                        <div class="videoWrap">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53ad389daa5a842135.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d1ba5480342136.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b24e2b608c442137.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53ad3906e48b242138.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d1df4d4af42139.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d1eb3e70042140.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b268232d81b42141.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53ad39ab89ff042142.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d1fcb6da742143.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d20e42f0c42144.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b0d340d1bca42145.jpg' style="background-size:cover !important;">
            </div>
            <div class="bigTxt-btn bigTxt-btn-wx lazy-img" data-src="/uploads/150801/53b0d36b6a99042145.jpg">
                <a href="javascript:void(0)"></a>
            </div>
            <div class="bigTxt-weixin"><img src="/uploads/150801/weixin-share-guide.png">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b2ab05d7a5c42146.jpg' style="background-size:cover !important;">
            </div>
        </div>
        <div class='m-page m-bigTxt f-hide' data-page-type='bigTxt' data-statics='info_list'>
            <div class="page-con j-txtWrap lazy-img" data-src='/uploads/150801/53b20d45b4a3542147.jpg' style="background-size:cover !important;">
            </div>
        </div>
    </div>
</section>
<div class="ylmap bigOpen">
    <div class='bk'><span class='css_sprite01'></span>
    </div>
</div>
<section class="u-pageLoading">
    <img src="/uploads/150801/load.gif" alt="loading" />
</section>
<input id="activity_id" type="hidden" value='4063' />
<script src="/uploads/150801/init.min.js?ver=20150408184025" type="text/javascript" charset="utf-8"></script>

摩擦出现美女图片的H5轻应用动效典型案例。 Source: http://w.liveapp.cn/auto/index/4063

编辑器支持Emmet

快捷键

摩擦出现美女图片的H5轻应用动效典型案例。 Source: http://w.liveapp.cn/auto/index/4063

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

烧机神作！使用HTML5 WebGL制作的育碧荣耀战魂游戏展示页面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：