@charset "utf-8"; body { margin:0px; padding:0px;} label { cursor:pointer;} a:link, a:visited { text-decoration:none;} input:focus { outline: none; } input,button,select,textarea{outline:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ } textarea{resize:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } /*利用阴影来填充掉input自动填充色*/ 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;} /*html5设置*/ .index_main{ width:960px; margin:0 auto; display:block; overflow:hidden; } .index_logo{ display:block; overflow:hidden; float:left; top:0px; position:fixed; z-index:99999999999; } .yun{ display:block; overflow:hidden; clear:both; width:100%; max-width:960px; } .yun_left{ display:block; float:left; } .yun_left img{ padding-top:70px; } .yun_right{ display:block; float:right; } .peak{ display:block; overflow:hidden; text-align:center; clear:both; } .index_menu{ display:block; float:left; top:170px; position:absolute; z-index:9999; } .index_menu a{ background:url(../../images/www/index_icon.png) left center no-repeat; padding-left:18px; line-height:35px; } .index_menu a:hover{ font-size:16px; } .in_menu_1{ display:block; overflow:hidden; margin-left: 239px; margin-top: 51px; width:85px; height:34px; } .in_menu_1 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_1 a:hover{ color:#b60000; font-size:16px; } .in_menu_2{ display:block; overflow:hidden; margin-left: 716px; margin-top: 50px; width:85px; height:34px; } .in_menu_2 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_2 a:hover{ color:#b60000; font-size:16px; } .in_menu_3{ display:block; overflow:hidden; margin-left: 69px; width:85px; height:34px; } .in_menu_3 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_3 a:hover{ color:#b60000; font-size:16px; } .in_menu_4{ display:block; overflow:hidden; position: absolute; margin-left: 483px; *margin-left: -380px; margin-top: -212px; width:85px; height:34px; } .in_menu_4 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_4 a:hover{ color:#b60000; font-size:16px; } .in_menu_5{ display:block; overflow:hidden; margin-left: 857px; margin-top: 8px; width:85px; height:34px; } .in_menu_5 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_5 a:hover{ color:#b60000; font-size:16px; } .in_menu_6{ display:block; overflow:hidden; margin-left: 441px; margin-top: 40px; width:85px; height:34px; } .in_menu_6 a{ text-decoration:none; font-size:14px; color:#000; } .in_menu_6 a:hover{ color:#b60000; font-size:16px; } @media (max-width: 768px){ } @media (max-width: 640px){ } @media (max-width: 414px){ /*分隔线*/ .index_main{ width:100%; margin:0 auto; display:block; overflow:hidden; } .index_logo{ display:block; overflow:hidden; float:left; top:0px; position:fixed; z-index:99999999999; } .index_logo img{ width:80%; } .yun{ display:block; overflow:hidden; width:100%; clear:both; } .yun img{ width:50%; } .yun_left{ display:block; float:left; } .yun_left img{ padding-top:70px; } .yun_right{ display:block; float:right; } .peak{ display:block; overflow:hidden; text-align:center; clear:both; width:100%; } .peak img{ width:100%; } .index_menu{ display:block; float:left; top:170px; position:absolute; z-index:9999; width:100%; } .index_menu a{ background:url(../../images/www/index_icon.png) left center no-repeat 50% 50%; padding-left:18px; line-height:35px; } .index_menu a:hover{ font-size:110%; } .in_menu_1{ display:block; overflow:hidden; position:relative; margin-left: 18%; margin-top: 6%; } .in_menu_1 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_1 a:hover{ color:#b60000; font-size:110%; } .in_menu_2{ display:block; overflow:hidden; position:relative; margin-left:68%; margin-top: -3%; } .in_menu_2 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_2 a:hover{ color:#b60000; font-size:110%; } .in_menu_3{ display:block; overflow:hidden; position:relative; margin-left: 5%; margin-top: -3%; } .in_menu_3 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_3 a:hover{ color:#b60000; font-size:110%; } .in_menu_4{ display:block; overflow:hidden; position:relative; position: absolute; margin-left: 46%; margin-top:-25%; } .in_menu_4 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_4 a:hover{ color:#b60000; font-size:110%; } .in_menu_5{ display:block; overflow:hidden; position: relative; margin-left: 80%; margin-top: -6%; } .in_menu_5 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_5 a:hover{ color:#b60000; font-size:110%; } .in_menu_6{ display:block; overflow:hidden; position: relative; margin-left: 5%; margin-top: -6%; } .in_menu_6 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_6 a:hover{ color:#b60000; font-size:110%; } } @media (max-width: 375px){ /*分隔线*/ .index_main{ width:100%; margin:0 auto; display:block; overflow:hidden; } .index_logo{ display:block; overflow:hidden; float:left; top:0px; position:fixed; z-index:99999999999; } .index_logo img{ width:80%; } .yun{ display:block; overflow:hidden; width:100%; clear:both; } .yun img{ width:50%; } .yun_left{ display:block; float:left; } .yun_left img{ padding-top:70px; } .yun_right{ display:block; float:right; } .peak{ display:block; overflow:hidden; text-align:center; clear:both; width:100%; } .peak img{ width:100%; } .index_menu{ display:block; float:left; top:170px; position:absolute; z-index:9999; width:100%; } .index_menu a{ background:url(../../images/www/index_icon.png) left center no-repeat 50% 50%; padding-left:18px; line-height:35px; } .index_menu a:hover{ font-size:110%; } .in_menu_1{ display:block; overflow:hidden; position:relative; margin-left: 19%; margin-top:6%; } .in_menu_1 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_1 a:hover{ color:#b60000; font-size:110%; } .in_menu_2{ display:block; overflow:hidden; position:relative; margin-left: 61%; margin-top:-4%; } .in_menu_2 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_2 a:hover{ color:#b60000; font-size:110%; } .in_menu_3{ display:block; overflow:hidden; position:relative; margin-left: 4%; margin-top: -6%; } .in_menu_3 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_3 a:hover{ color:#b60000; font-size:110%; } .in_menu_4{ display:block; overflow:hidden; position:relative; position: absolute; margin-left: 45%; margin-top: -25%; } .in_menu_4 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_4 a:hover{ color:#b60000; font-size:110%; } .in_menu_5{ display:block; overflow:hidden; position: relative; margin-left: 79%; margin-top: -5%; } .in_menu_5 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_5 a:hover{ color:#b60000; font-size:110%; } .in_menu_6{ display:block; overflow:hidden; position: relative; margin-left: 10%; margin-top: -31%; } .in_menu_6 a{ text-decoration:none; font-size:90%; color:#000; } .in_menu_6 a:hover{ color:#b60000; font-size:110%; } } @media (max-width: 320px){ .index_main{ width:100%; margin:0 auto; display:block; overflow:hidden; } .index_logo{ display:block; overflow:hidden; float:left; top:0px; position:fixed; z-index:99999999999; } .index_logo img{ width:80%; } .yun{ display:block; overflow:hidden; width:100%; clear:both; } .yun img{ width:50%; } .yun_left{ display:block; float:left; } .yun_left img{ padding-top:70px; } .yun_right{ display:block; float:right; } .peak{ display:block; overflow:hidden; text-align:center; clear:both; width:100%; } .peak img{ width:100%; } .index_menu{ display:block; float:left; top:170px; position:absolute; z-index:9999; width:100%; } .index_menu a{ background:url(../../images/www/index_icon.png) left center no-repeat 50% 50%; padding-left:18px; line-height:35px; } .index_menu a:hover{ font-size:110%; } .in_menu_1{ display:block; overflow:hidden; position:relative; margin-left: 16%; margin-top: -2%; } .in_menu_1 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_1 a:hover{ color:#b60000; font-size:110%; } .in_menu_2{ display:block; overflow:hidden; position:relative; margin-left: 63%; margin-top: -5%; } .in_menu_2 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_2 a:hover{ color:#b60000; font-size:110%; } .in_menu_3{ display:block; overflow:hidden; position:relative; margin-left: 5%; margin-top: -3%; } .in_menu_3 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_3 a:hover{ color:#b60000; font-size:110%; } .in_menu_4{ display:block; overflow:hidden; position:relative; position: absolute; margin-left: 44%; margin-top: -31%; } .in_menu_4 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_4 a:hover{ color:#b60000; font-size:110%; } .in_menu_5{ display:block; overflow:hidden; position: relative; margin-left: 75%; margin-top: -9%; } .in_menu_5 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_5 a:hover{ color:#b60000; font-size:110%; } .in_menu_6{ display:block; overflow:hidden; position: relative; margin-left: 10%; margin-top: -34%; } .in_menu_6 a{ text-decoration:none; font-size:80%; color:#000; } .in_menu_6 a:hover{ color:#b60000; font-size:110%; } } /*播放按钮*/ @-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;} } /* animation动画库 */ .a-shake,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} .a-fadein,.a-fadeinT,.a-fadeinB,.a-bounceinT,.a-bounceinR,.a-bounceinB,.a-bounceinL,.a-rotatein,.a-rotateinLT,.a-rotateinLB,.a-rotateinRT,.a-rotateinRB,.a-flipin,.a-flipinY{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;} .a-flipinX,.a-swing,.a-flash,.a-flip,.a-bounce,.a-fadeinL,.a-fadeinR{ -webkit-animation: 20s infinite backwards;-moz-animation:20s infinite backwards;-ms-animation:20s infinite backwards;animation:20s infinite backwards; } .a-bouncein{ -webkit-animation: 8s infinite backwards;-moz-animation:8s infinite backwards;-ms-animation:8s infinite backwards;animation:8s infinite backwards; } .a-fadeout,.a-fadeoutT,.a-fadeoutR,.a-fadeoutB,.a-fadeoutL,.a-bounceout,.a-bounceoutT,.a-bounceoutR,.a-bounceoutB,.a-bounceoutL,.a-rotateout,.a-rotateoutLT,.a-rotateoutLB,.a-rotateoutRT,.a-rotateoutRB,.a-flipout,.a-flipoutX,.a-flipoutY{-webkit-animation:1s ease-in forwards;-moz-animation:1s ease-in forwards;-ms-animation:1s ease-in forwards;animation:1s ease-in forwards;} /* 淡入 */ .a-fadein{-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;} /* 淡入-从上 */ .a-fadeinT{-webkit-animation-name:fadeinT;-moz-animation-name:fadeinT;-ms-animation-name:fadeinT;animation-name:fadeinT;} /* 淡入-从右 */ .a-fadeinR{-webkit-animation-name:fadeinR;-moz-animation-name:fadeinR;-ms-animation-name:fadeinR;animation-name:fadeinR;} /* 淡入-从下 */ .a-fadeinB{-webkit-animation-name:fadeinB;-moz-animation-name:fadeinB;-ms-animation-name:fadeinB;animation-name:fadeinB;} /* 淡入-从左 */ .a-fadeinL{-webkit-animation-name:fadeinL;-moz-animation-name:fadeinL;-ms-animation-name:fadeinL;animation-name:fadeinL;} /* 淡出 */ .a-fadeout{-webkit-animation-name:fadeout;-moz-animation-name:fadeout;-ms-animation-name:fadeout;animation-name:fadeout;} /* 淡出-向上 */ .a-fadeoutT{-webkit-animation-name:fadeoutT;-moz-animation-name:fadeoutT;-ms-animation-n ame:fadeoutT;animation-name:fadeoutT;} /* 淡出-向右 */ .a-fadeoutR{-webkit-animation-name:fadeoutR;-moz-animation-name:fadeoutR;-ms-animation-name:fadeoutR;animation-name:fadeoutR;} /* 淡出-向下 */ .a-fadeoutB{-webkit-animation-name:fadeoutB;-moz-animation-name:fadeoutB;-ms-animation-name:fadeoutB;animation-name:fadeoutB;} /* 淡出-向左 */ .a-fadeoutL{-webkit-animation-name:fadeoutL;-moz-animation-name:fadeoutL;-ms-animation-name:fadeoutL;animation-name:fadeoutL;} /* 弹跳 */ .a-bounce{-webkit-animation-name:bounce;-moz-animation-name:bounce;-ms-animation-name:bounce;animation-name:bounce;} /* 弹入 */ .a-bouncein{-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;} /* 弹入-从上 */ .a-bounceinT{-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;} /* 弹入-从右 */ .a-bounceinR{-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;} /* 弹入-从下 */ .a-bounceinB{-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;} /* 弹入-从左 */ .a-bounceinL{-webkit-animation-name:bounceinL;-moz-animation-name:bounceinL;-ms-animation-name:bounceinL;animation-name:bounceinL;} /* 弹出 */ .a-bounceout{-webkit-animation-name:bounceout;-moz-animation-name:bounceout;-ms-animation-name:bounceout;animation-name:bounceout;} /* 弹出-向上 */ .a-bounceoutT{-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;} /* 弹出-向右 */ .a-bounceoutR{-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;} /* 弹出-向下 */ .a-bounceoutB{-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;} /* 弹出-向左 */ .a-bounceoutL{-webkit-animation-name:bounceoutL;-moz-animation-name:bounceoutL;-ms-animation-name:bounceoutL;animation-name:bounceoutL;} /* 转入 */ .a-rotatein{-webkit-animation-name:rotatein;-moz-animation-name:rotatein;-ms-animation-name:rotatein;animation-name:rotatein;} /* 转入-从左上 */ .a-rotateinLT{-webkit-animation-name:rotateinLT;-moz-animation-name:rotateinLT;-ms-animation-name:rotateinLT;animation-name:rotateinLT;} /* 转入-从左下 */ .a-rotateinLB{-webkit-animation-name:rotateinLB;-moz-animation-name:rotateinLB;-ms-animation-name:rotateinLB;animation-name:rotateinLB;} /* 转入-从右上 */ .a-rotateinRT{-webkit-animation-name:rotateinRT;-moz-animation-name:rotateinRT;-ms-animation-name:rotateinRT;animation-name:rotateinRT;} /* 转入-从右下*/ .a-rotateinRB{-webkit-animation-name:rotateinRB;-moz-animation-name:rotateinRB;-ms-animation-name:rotateinRB;animation-name:rotateinRB;} /* 转出 */ .a-rotateout{-webkit-animation-name:rotateout;-moz-animation-name:rotateout;-ms-animation-name:rotateout;animation-name:rotateout;} /* 转出-向左上 */ .a-rotateoutLT{-webkit-animation-name:rotateoutLT;-moz-animation-name:rotateoutLT;-ms-animation-name:rotateoutLT;animation-name:rotateoutLT;} /* 转出-向左下 */ .a-rotateoutLB{-webkit-animation-name:rotateoutLB;-moz-animation-name:rotateoutLB;-ms-animation-name:rotateoutLB;animation-name:rotateoutLB;} /* 转出-向右上 */ .a-rotateoutRT{-webkit-animation-name:rotateoutRT;-moz-animation-name:rotateoutRT;-ms-animation-name:rotateoutRT;animation-name:rotateoutRT;} /* 转出-向右下 */ .a-rotateoutRB{-webkit-animation-name:rotateoutRB;-moz-animation-name:rotateoutRB;-ms-animation-name:rotateoutRB;animation-name:rotateoutRB;} /* 翻转 */ .a-flip{-webkit-animation-name:flip;-moz-animation-name:flip;-ms-animation-name:flip;animation-name:flip;} /* 翻入-X轴 */ .a-flipinX{-webkit-animation-name:flipinX;-moz-animation-name:flipinX;-ms-animation-name:flipinX;animation-name:flipinX;} /* 翻入-Y轴 */ .a-flipin,.a-flipinY{-webkit-animation-name:flipinY;-moz-animation-name:flipinY;-ms-animation-name:flipinY;animation-name:flipinY;} /* 翻出-X轴 */ .a-flipoutX{-webkit-animation-name:flipoutX;-moz-animation-name:flipoutX;-ms-animation-name:flipoutX;animation-name:flipoutX;} /* 翻出-Y轴 */ .a-flipout,.a-flipoutY{-webkit-animation-name:flipoutY;-moz-animation-name:flipoutY;-ms-animation-name:flipoutY;animation-name:flipoutY;} /* 闪烁 */ .a-flash{-webkit-animation-name:flash;-moz-animation-name:flash;-ms-animation-name:flash;animation-name:flash;} /* 震颤 */ .a-shake{-webkit-animation-name:shake;-moz-animation-name:shake;-ms-animation-name:shake;animation-name:shake;} /* 摇摆 */ .a-swing{-webkit-animation-name:swing;-moz-animation-name:swing;-ms-animation-name:swing;animation-name:swing;} /* 摇晃 */ .a-wobble{-webkit-animation-name:wobble;-moz-animation-name:wobble;-ms-animation-name:wobble;animation-name:wobble;} /* 震铃 */ .a-ring{-webkit-animation-name:ring;-moz-animation-name:ring;-ms-animation-name:ring;animation-name:ring;} /* define */ /* 淡入 */ @-webkit-keyframes fadein{ 0%{opacity:0;} 100%{opacity:1;} } @-moz-keyframes fadein{ 0%{opacity:0;} 100%{opacity:1;} } @-ms-keyframes fadein{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes fadein{ 0%{opacity:0;} 100%{opacity:1;} } /* 淡入-从上 */ @-webkit-keyframes fadeinT{ 0%{opacity:0;-webkit-transform:translateY(-100px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeinT{ 0%{opacity:0;-moz-transform:translateY(-100px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeinT{ 0%{opacity:0;-ms-transform:translateY(-100px);} 100%{opacity:1;-ms-transform:translateY(0);} } @keyframes fadeinT{ 0%{opacity:0;transform:translateY(-100px);} 100%{opacity:1;transform:translateY(0);} } /* 淡入-从右 */ @-webkit-keyframes fadeinR{ 0%{opacity:0.5;-webkit-transform:translateX(0px);} 30%{opacity:1;-webkit-transform:translateX(-480px);} 60%{opacity:1;-webkit-transform:translateX(-480px);} 100%{opacity:1;-webkit-transform:translateX(0px);} } @-moz-keyframes fadeinR{ 0%{opacity:0.5;-moz-transform:translateX(0px);} 30%{opacity:1;-moz-transform:translateX(-480px);} 60%{opacity:1;-moz-transform:translateX(-480px);} 100%{opacity:1;-moz-transform:translateX(0px);} } @-ms-keyframes fadeinR{ 0%{opacity:0.5;-ms-transform:translateX(0px);} 30%{opacity:1;-ms-transform:translateX(-480px);} 60%{opacity:1;-ms-transform:translateX(-480px);} 100%{opacity:1;-ms-transform:translateX(0px);} } @keyframes fadeinR{ 0%{opacity:0.5;transform:translateX(0px);} 30%{opacity:1;transform:translateX(-480px);} 60%{opacity:1;transform:translateX(-480px);} 100%{opacity:1;transform:translateX(0px);} } /* 淡入-从下 */ @-webkit-keyframes fadeinB{ 0%{opacity:0;-webkit-transform:translateY(100px);} 100%{opacity:1;-webkit-transform:translateY(0);} } @-moz-keyframes fadeinB{ 0%{opacity:0;-moz-transform:translateY(100px);} 100%{opacity:1;-moz-transform:translateY(0);} } @-ms-keyframes fadeinB{ 0%{opacity:0;-ms-transform:translateY(100px);} 100%{opacity:1;-ms-transform:translateY(0);} } @keyframes fadeinB{ 0%{opacity:0;transform:translateY(100px);} 100%{opacity:1;transform:translateY(0);} } /* 淡入-从左 */ @-webkit-keyframes fadeinL{ 0%{opacity:0.5;-webkit-transform:translateX(0px);} 30%{opacity:1;-webkit-transform:translateX(600px);} 60%{opacity:1;-webkit-transform:translateX(600px);} 100%{opacity:1;-webkit-transform:translateX(0px);} } @-moz-keyframes fadeinL{ 0%{opacity:0.5;-moz-transform:translateX(0px);} 30%{opacity:1;-moz-transform:translateX(600px);} 60%{opacity:1;-moz-transform:translateX(600px);} 100%{opacity:1;-moz-transform:translateX(0px);} } @-ms-keyframes fadeinL{ 0%{opacity:0.5;-ms-transform:translateX(0px);} 30%{opacity:1;-ms-transform:translateX(600px);} 60%{opacity:1;-ms-transform:translateX(600px);} 100%{opacity:1;-ms-transform:translateX(0px);} } @keyframes fadeinL{ 0%{opacity:0.5;transform:translateX(0px);} 30%{opacity:1;transform:translateX(600px);} 60%{opacity:1;transform:translateX(600px);} 100%{opacity:1;transform:translateX(0px);} } /* 淡出 */ @-webkit-keyframes fadeout{ 0%{opacity:1;} 100%{opacity:0;} } @-moz-keyframes fadeout{ 0%{opacity:1;} 100%{opacity:0;} } @-ms-keyframes fadeout{ 0%{opacity:1;} 100%{opacity:0;} } @keyframes fadeout{ 0%{opacity:1;} 100%{opacity:0;} } /* 淡出-向上 */ @-webkit-keyframes fadeoutT{ 0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(-100px);} } @-moz-keyframes fadeoutT{ 0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(-100px);} } @-ms-keyframes fadeoutT{ 0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(-100px);} } @keyframes fadeoutT{ 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(-100px);} } /* 淡出-向右 */ @-webkit-keyframes fadeoutR{ 0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(100px);} } @-moz-keyframes fadeoutR{ 0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(100px);} } @-ms-keyframes fadeoutR{ 0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(100px);} } @keyframes fadeoutR{ 0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(100px);} } /* 淡出-向下 */ @-webkit-keyframes fadeoutB{ 0%{opacity:1;-webkit-transform:translateY(0);} 100%{opacity:0;-webkit-transform:translateY(100px);} } @-moz-keyframes fadeoutB{ 0%{opacity:1;-moz-transform:translateY(0);} 100%{opacity:0;-moz-transform:translateY(100px);} } @-ms-keyframes fadeoutB{ 0%{opacity:1;-ms-transform:translateY(0);} 100%{opacity:0;-ms-transform:translateY(100px);} } @keyframes fadeoutB{ 0%{opacity:1;transform:translateY(0);} 100%{opacity:0;transform:translateY(100px);} } /* 淡出-向左 */ @-webkit-keyframes fadeoutL{ 0%{opacity:1;-webkit-transform:translateX(0);} 100%{opacity:0;-webkit-transform:translateX(-100px);} } @-moz-keyframes fadeoutL{ 0%{opacity:1;-moz-transform:translateX(0);} 100%{opacity:0;-moz-transform:translateX(-100px);} } @-ms-keyframes fadeoutL{ 0%{opacity:1;-ms-transform:translateX(0);} 100%{opacity:0;-ms-transform:translateX(-100px);} } @keyframes fadeoutL{ 0%{opacity:1;transform:translateX(0);} 100%{opacity:0;transform:translateX(-100px);} } /* 弹跳 */ @-webkit-keyframes bounce{ 0%,20%,50%,80%,100%{-webkit-transform:translateY(0);} 40%{-webkit-transform:translateY(-30px);} 60%{-webkit-transform:translateY(-15px);} } @-moz-keyframes bounce{ 0%,20%,50%,80%,100%{-moz-transform:translateY(0);} 40%{-moz-transform:translateY(-30px);} 60%{-moz-transform:translateY(-15px);} } @-ms-keyframes bounce{ 0%,20%,50%,80%,100%{-ms-transform:translateY(0);} 40%{-ms-transform:translateY(-30px);} 60%{-ms-transform:translateY(-15px);} } @keyframes bounce{ 0%,20%,50%,80%,100%{transform:translateY(0);} 40%{transform:translateY(-30px);} 60%{transform:translateY(-15px);} } /* 弹入 */ @-webkit-keyframes bouncein{ 0%{opacity:0;-webkit-transform:scale(0.9);} 50%{opacity:1;-webkit-transform:scale(1.05);} 70%{-webkit-transform:scale(0.9);} 100%{-webkit-transform:scale(1);} } @-moz-keyframes bouncein{ 0%{opacity:0;-moz-transform:scale(0.9);} 50%{opacity:1;-moz-transform:scale(1.05);} 70%{-moz-transform:scale(0.9);} 100%{-moz-transform:scale(1);} } @-ms-keyframes bouncein{ 0%{opacity:0;-ms-transform:scale(0.9);} 50%{opacity:1;-ms-transform:scale(1.05);} 70%{-ms-transform:scale(0.9);} 100%{-ms-transform:scale(1);} } @keyframes bouncein{ 0%{opacity:0;transform:scale(0.9);} 50%{opacity:1;transform:scale(1.05);} 70%{transform:scale(0.9);} 100%{transform:scale(1);} } /* 弹入-从上 */ @-webkit-keyframes bounceinT{ 0%{opacity:0;-webkit-transform:translateY(-100px);} 60%{opacity:1;-webkit-transform:translateY(30px);} 80%{-webkit-transform:translateY(-10px);} 100%{-webkit-transform:translateY(0);} } @-moz-keyframes bounceinT{ 0%{opacity:0;-moz-transform:translateY(-100px);} 60%{opacity:1;-moz-transform:translateY(30px);} 80%{-moz-transform:translateY(-10px);} 100%{-moz-transform:translateY(0);} } @-ms-keyframes bounceinT{ 0%{opacity:0;-ms-transform:translateY(-100px);} 60%{opacity:1;-ms-transform:translateY(30px);} 80%{-ms-transform:translateY(-10px);} 100%{-ms-transform:translateY(0);} } @keyframes bounceinT{ 0%{opacity:0;transform:translateY(-100px);} 60%{opacity:1;transform:translateY(30px);} 80%{transform:translateY(-10px);} 100%{transform:translateY(0);} } /* 弹入-从右 */ @-webkit-keyframes bounceinR{ 0%{opacity:0;-webkit-transform:translateX(100px);} 60%{opacity:1;-webkit-transform:translateX(-30px);} 80%{-webkit-transform:translateX(10px);} 100%{-webkit-transform:translateX(0);} } @-moz-keyframes bounceinR{ 0%{opacity:0;-moz-transform:translateX(100px);} 60%{opacity:1;-moz-transform:translateX(-30px);} 80%{-moz-transform:translateX(10px);} 100%{-moz-transform:translateX(0);} } @-ms-keyframes bounceinR{ 0%{opacity:0;-ms-transform:translateX(100px);} 60%{opacity:1;-ms-transform:translateX(-30px);} 80%{-ms-transform:translateX(10px);} 100%{-ms-transform:translateX(0);} } @keyframes bounceinR{ 0%{opacity:0;transform:translateX(100px);} 60%{opacity:1;transform:translateX(-30px);} 80%{transform:translateX(10px);} 100%{transform:translateX(0);} } /* 弹入-从下 */ @-webkit-keyframes bounceinB{ 0%{opacity:0;-webkit-transform:translateY(100px);} 60%{opacity:1;-webkit-transform:translateY(-50px);} 80%{-webkit-transform:translateY(10px);} 100%{-webkit-transform:translateY(0);} } @-moz-keyframes bounceinB{ 0%{opacity:0;-moz-transform:translateY(100px);} 60%{opacity:1;-moz-transform:translateY(-50px);} 80%{-moz-transform:translateY(20px)} 100%{-moz-transform:translateY(0);} } @-ms-keyframes bounceinB{ 0%{opacity:0;-ms-transform:translateY(100px);} 60%{opacity:1;-ms-transform:translateY(-50px);} 80%{-ms-transform:translateY(10px);} 100%{-ms-transform:translateY(0);} } @keyframes bounceinB{ 0%{opacity:0;transform:translateY(100px);} 60%{opacity:1;transform:translateY(-50px);} 80%{transform:translateY(10px);} 100%{transform:translateY(0);} } /* 弹入-从左 */ @-webkit-keyframes bounceinL{ 0%{opacity:0;-webkit-transform:translateX(-100px);} 60%{opacity:1;-webkit-transform:translateX(30px);} 80%{-webkit-transform:translateX(-10px);} 100%{-webkit-transform:translateX(0);} } @-moz-keyframes bounceinL{ 0%{opacity:0;-moz-transform:translateX(-100px);} 60%{opacity:1;-moz-transform:translateX(30px);} 80%{-moz-transform:translateX(-10px);} 100%{-moz-transform:translateX(0);} } @-ms-keyframes bounceinL{ 0%{opacity:0;-ms-transform:translateX(-100px);} 60%{opacity:1;-ms-transform:translateX(30px);} 80%{-ms-transform:translateX(-10px);} 100%{-ms-transform:translateX(0);} } @keyframes bounceinL{ 0%{opacity:0;transform:translateX(-100px);} 60%{opacity:1;transform:translateX(30px);} 80%{transform:translateX(-10px);} 100%{transform:translateX(0);} } /* 弹出 */ @-webkit-keyframes bounceout{ 0%{-webkit-transform:scale(1);} 25%{-webkit-transform:scale(0.95);} 50%{opacity:1;-webkit-transform:scale(1.1);} 100%{opacity:0;-webkit-transform:scale(0.3);} } @-moz-keyframes bounceout{ 0%{-moz-transform:scale(1);} 25%{-moz-transform:scale(0.95);} 50%{opacity:1;-moz-transform:scale(1.1);} 100%{opacity:0;-moz-transform:scale(0.3);} } @-ms-keyframes bounceout{ 0%{-ms-transform:scale(1);} 25%{-ms-transform:scale(0.95);} 50%{opacity:1;-ms-transform:scale(1.1);} 100%{opacity:0;-ms-transform:scale(0.3);} } @keyframes bounceout{ 0%{transform:scale(1);} 25%{transform:scale(0.95);} 50%{opacity:1;transform:scale(1.1);} 100%{opacity:0;transform:scale(0.3);} } /* 弹出-向上*/ @-webkit-keyframes bounceoutT{ 0%{-webkit-transform:translateY(0);} 20%{opacity:1;-webkit-transform:translateY(20px);} 100%{opacity:0;-webkit-transform:translateY(-100px);} } @-moz-keyframes bounceoutT{ 0%{-moz-transform:translateY(0);} 20%{opacity:1;-moz-transform:translateY(20px);} 100%{opacity:0;-moz-transform:translateY(-100px);} } @-ms-keyframes bounceoutT{ 0%{-ms-transform:translateY(0);} 20%{opacity:1;-ms-transform:translateY(20px);} 100%{opacity:0;-ms-transform:translateY(-100px);} } @keyframes bounceoutT{ 0%{transform:translateY(0);} 20%{opacity:1;transform:translateY(20px);} 100%{opacity:0;transform:translateY(-100px);} } /* 弹出-向右*/ @-webkit-keyframes bounceoutR{ 0%{-webkit-transform:translateX(0);} 20%{opacity:1;-webkit-transform:translateX(-20px);} 100%{opacity:0;-webkit-transform:translateX(100px);} } @-moz-keyframes bounceoutR{ 0%{-moz-transform:translateX(0);} 20%{opacity:1;-moz-transform:translateX(-20px);} 100%{opacity:0;-moz-transform:translateX(100px);} } @-ms-keyframes bounceoutR{ 0%{-ms-transform:translateX(0);} 20%{opacity:1;-ms-transform:translateX(-20px);} 100%{opacity:0;-ms-transform:translateX(100px);} } @keyframes bounceoutR{ 0%{transform:translateX(0);} 20%{opacity:1;transform:translateX(-20px);} 100%{opacity:0;transform:translateX(100px);} } /* 弹出-向下 */ @-webkit-keyframes bounceoutB{ 0%{-webkit-transform:translateY(0);} 20%{opacity:1;-webkit-transform:translateY(-20px);} 100%{opacity:0;-webkit-transform:translateY(100px);} } @-moz-keyframes bounceoutB{ 0%{-moz-transform:translateY(0);} 20%{opacity:1;-moz-transform:translateY(-20px);} 100%{opacity:0;-moz-transform:translateY(100px);} } @-ms-keyframes bounceoutB{ 0%{-ms-transform:translateY(0);} 20%{opacity:1;-ms-transform:translateY(-20px);} 100%{opacity:0;-ms-transform:translateY(100px);} } @keyframes bounceoutB{ 0%{transform:translateY(0);} 20%{opacity:1;transform:translateY(-20px);} 100%{opacity:0;transform:translateY(100px);} } /* 弹出-向左 */ @-webkit-keyframes bounceoutL{ 0%{-webkit-transform:translateX(0);} 20%{opacity:1;-webkit-transform:translateX(20px);} 100%{opacity:0;-webkit-transform:translateX(-100px);} } @-moz-keyframes bounceoutL{ 0%{-moz-transform:translateX(0);} 20%{opacity:1;-moz-transform:translateX(20px);} 100%{opacity:0;-moz-transform:translateX(-100px);} } @-ms-keyframes bounceoutL{ 0%{-ms-transform:translateX(0);} 20%{opacity:1;-ms-transform:translateX(20px);} 100%{opacity:0;-ms-transform:translateX(-100px);} } @keyframes bounceoutL{ 0%{transform:translateX(0);} 20%{opacity:1;transform:translateX(20px);} 100%{opacity:0;transform:translateX(-200px);} } /* 转入 */ @-webkit-keyframes rotatein{ 0%{opacity:0;-webkit-transform:rotate(-200deg);} 100%{opacity:1;-webkit-transform:rotate(0);} } @-moz-keyframes rotatein{ 0%{opacity:0;-moz-transform:rotate(-200deg);} 100%{opacity:1;-moz-transform:rotate(0);} } @-ms-keyframes rotatein{ 0%{opacity:0;-ms-transform:rotate(-200deg);} 100%{opacity:1;-ms-transform:rotate(0);} } @keyframes rotatein{ 0%{opacity:0;transform:rotate(-200deg);} 100%{opacity:1;transform:rotate(0);} } /* 转入-从左上 */ @-webkit-keyframes rotateinLT{ 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinLT{ 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinLT{ 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinLT{ 0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } /* 转入-从左下 */ @-webkit-keyframes rotateineftB{ 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateineftB{ 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateineftB{ 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateineftB{ 0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:left bottom;transform:rotate(0);opacity:1;} } /* 转入-从右上 */ @-webkit-keyframes rotateinRT{ 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinRT{ 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinRT{ 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinRT{ 0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } /* 转入-从右下*/ @-webkit-keyframes rotateinRB{ 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} } @-moz-keyframes rotateinRB{ 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} } @-ms-keyframes rotateinRB{ 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} } @keyframes rotateinRB{ 0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} 100%{transform-origin:right bottom;transform:rotate(0);opacity:1;} } /* 转出 */ @-webkit-keyframes rotateout{ 0%{-webkit-transform-origin:center center;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:center center;-webkit-transform:rotate(200deg);opacity:0;} } @-moz-keyframes rotateout{ 0%{-moz-transform-origin:center center;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:center center;-moz-transform:rotate(200deg);opacity:0;} } @-ms-keyframes rotateout{ 0%{-ms-transform-origin:center center;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:center center;-ms-transform:rotate(200deg);opacity:0;} } @keyframes rotateout{ 0%{transform-origin:center center;transform:rotate(0);opacity:1;} 100%{transform-origin:center center;transform:rotate(200deg);opacity:0;} } /* 转出-向左上 */ @-webkit-keyframes rotateoutLT{ 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateoutLT{ 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateoutLT{ 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(-90deg);opacity:0;} } @keyframes rotateoutLT{ 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;} } /* 转出-向左下 */ @-webkit-keyframes rotateoutLB{ 0%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:left bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateoutLB{ 0%{-moz-transform-origin:left bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:left bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateoutLB{ 0%{-ms-transform-origin:left bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:left bottom;-ms-transform:rotate(90deg);opacity:0;} } @keyframes rotateoutLB{ 0%{transform-origin:left bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;} } /* 转出-向右上 */ @-webkit-keyframes rotateoutRT{ 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(90deg);opacity:0;} } @-moz-keyframes rotateoutRT{ 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(90deg);opacity:0;} } @-ms-keyframes rotateoutRT{ 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(90deg);opacity:0;} } @keyframes rotateoutRT{ 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;} } /* 转出-向右下 */ @-webkit-keyframes rotateoutBR{ 0%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(0);opacity:1;} 100%{-webkit-transform-origin:right bottom;-webkit-transform:rotate(-90deg);opacity:0;} } @-moz-keyframes rotateoutBR{ 0%{-moz-transform-origin:right bottom;-moz-transform:rotate(0);opacity:1;} 100%{-moz-transform-origin:right bottom;-moz-transform:rotate(-90deg);opacity:0;} } @-ms-keyframes rotateoutBR{ 0%{-ms-transform-origin:right bottom;-ms-transform:rotate(0);opacity:1;} 100%{-ms-transform-origin:right bottom;-ms-transform:rotate(-90deg);opacity:0;} } @keyframes rotateoutBR{ 0%{transform-origin:right bottom;transform:rotate(0);opacity:1;} 100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;} } /* 翻转 */ @-webkit-keyframes flip{ 0%{-webkit-transform:perspective(400px) rotateY(0);-webkit-animation-timing-function:ease-out;} 40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);-webkit-animation-timing-function:ease-out;} 50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;} 80%{-webkit-transform:perspective(400px) rotateY(360deg) scale(0.95);-webkit-animation-timing-function:ease-in;} 100%{-webkit-transform:perspective(400px) scale(1);-webkit-animation-timing-function:ease-in;} } @-moz-keyframes flip{ 0%{-moz-transform:perspective(400px) rotateY(0);-moz-animation-timing-function:ease-out;} 40%{-moz-transform:perspective(400px) translateZ(150px) rotateY(170deg);-moz-animation-timing-function:ease-out;} 50%{-moz-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-moz-animation-timing-function:ease-in;} 80%{-moz-transform:perspective(400px) rotateY(360deg) scale(0.95);-moz-animation-timing-function:ease-in;} 100%{-moz-transform:perspective(400px) scale(1);-moz-animation-timing-function:ease-in;} } @-ms-keyframes flip{ 0%{-ms-transform:perspective(400px) rotateY(0);-ms-animation-timing-function:ease-out;} 40%{-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg);-ms-animation-timing-function:ease-out;} 50%{-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-animation-timing-function:ease-in;} 80%{-ms-transform:perspective(400px) rotateY(360deg) scale(0.95);-ms-animation-timing-function:ease-in;} 100%{-ms-transform:perspective(400px) scale(1);-ms-animation-timing-function:ease-in;} } @keyframes flip{ 0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out;} 40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out;} 50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in;} 80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in;} 100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in;} } /* 翻入-X轴 */ @-webkit-keyframes flipinX{ 0%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-webkit-transform:perspective(400px) rotateX(-10deg);} 70%{-webkit-transform:perspective(400px) rotateX(10deg);} 100%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} } @-moz-keyframes flipinX{ 0%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-moz-transform:perspective(400px) rotateX(-10deg);} 70%{-moz-transform:perspective(400px) rotateX(10deg);} 100%{-moz-transform:perspective(400px) rotateX(0);opacity:1;} } @-ms-keyframes flipinX{ 0%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{-ms-transform:perspective(400px) rotateX(-10deg);} 70%{-ms-transform:perspective(400px) rotateX(10deg);} 100%{-ms-transform:perspective(400px) rotateX(0);opacity:1;} } @keyframes flipinX{ 0%{transform:perspective(400px) rotateX(90deg);opacity:0;} 40%{transform:perspective(400px) rotateX(-10deg);} 70%{transform:perspective(400px) rotateX(10deg);} 100%{transform:perspective(400px) rotateX(0);opacity:1;} } /* 翻入-Y轴 */ @-webkit-keyframes flipinY{ 0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-webkit-transform:perspective(400px) rotateY(-10deg);} 70%{-webkit-transform:perspective(400px) rotateY(10deg);} 100%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} } @-moz-keyframes flipinY{ 0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-moz-transform:perspective(400px) rotateY(-10deg);} 70%{-moz-transform:perspective(400px) rotateY(10deg);} 100%{-moz-transform:perspective(400px) rotateY(0);opacity:1;} } @-ms-keyframes flipinY{ 0%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{-ms-transform:perspective(400px) rotateY(-10deg);} 70%{-ms-transform:perspective(400px) rotateY(10deg);} 100%{-ms-transform:perspective(400px) rotateY(0);opacity:1;} } @keyframes flipinY{ 0%{transform:perspective(400px) rotateY(90deg);opacity:0;} 40%{transform:perspective(400px) rotateY(-10deg);} 70%{transform:perspective(400px) rotateY(10deg);} 100%{transform:perspective(400px) rotateY(0);opacity:1;} } /* 翻出-X轴 */ @-webkit-keyframes flipoutX{ 0%{-webkit-transform:perspective(400px) rotateX(0);opacity:1;} 100%{-webkit-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-moz-keyframes flipoutX{ 0%{-moz-transform:perspective(400px) rotateX(0);opacity:1;} 100%{-moz-transform:perspective(400px) rotateX(90deg);opacity:0;} } @-ms-keyframes flipoutX{ 0%{-ms-transform:perspective(400px) rotateX(0);opacity:1;} 100%{-ms-transform:perspective(400px) rotateX(90deg);opacity:0;} } @keyframes flipoutX{ 0%{transform:perspective(400px) rotateX(0);opacity:1;} 100%{transform:perspective(400px) rotateX(90deg);opacity:0;} } /* 翻出-Y轴 */ @-webkit-keyframes flipoutY{ 0%{-webkit-transform:perspective(400px) rotateY(0);opacity:1;} 100%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-moz-keyframes flipoutY{ 0%{-moz-transform:perspective(400px) rotateY(0);opacity:1;} 100%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0;} } @-ms-keyframes flipoutY{ 0%{-ms-transform:perspective(400px) rotateY(0);opacity:1;} 100%{-ms-transform:perspective(400px) rotateY(90deg);opacity:0;} } @keyframes flipoutY{ 0%{transform:perspective(400px) rotateY(0);opacity:1;} 100%{transform:perspective(400px) rotateY(90deg);opacity:0;} } /* 闪烁 */ @-webkit-keyframes flash{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @-moz-keyframes flash{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @-ms-keyframes flash{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } @keyframes flash{ 0%,50%,100%{opacity:1;} 25%,75%{opacity:0;} } /* 震颤 */ @-webkit-keyframes shake{ 0%,100%{-webkit-transform:translateX(0);} 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);} 20%,40%,60%,80%{-webkit-transform:translateX(10px);} } @-moz-keyframes shake{ 0%,100%{-moz-transform:translateX(0);} 10%,30%,50%,70%,90%{-moz-transform:translateX(-10px);} 20%,40%,60%,80%{-moz-transform:translateX(10px);} } @-ms-keyframes shake{ 0%,100%{-ms-transform:translateX(0);} 10%,30%,50%,70%,90%{-ms-transform:translateX(-10px);} 20%,40%,60%,80%{-ms-transform:translateX(10px);} } @keyframes shake{ 0%,100%{transform:translateX(0);} 10%,30%,50%,70%,90%{transform:translateX(-10px);} 20%,40%,60%,80%{transform:translateX(10px);} } /* 摇摆 */ @-webkit-keyframes swing{ 20%{-webkit-transform:rotate(15deg);} 40%{-webkit-transform:rotate(-10deg);} 60%{-webkit-transform:rotate(5deg);} 80%{-webkit-transform:rotate(-5deg);} 100%{-webkit-transform:rotate(0);} } @-moz-keyframes swing{ 20%{-moz-transform:rotate(15deg);} 40%{-moz-transform:rotate(-10deg);} 60%{-moz-transform:rotate(5deg);} 80%{-moz-transform:rotate(-5deg);} 100%{-moz-transform:rotate(0);} } @-ms-keyframes swing{ 20%{-ms-transform:rotate(15deg);} 40%{-ms-transform:rotate(-10deg);} 60%{-ms-transform:rotate(5deg);} 80%{-ms-transform:rotate(-5deg);} 100%{-ms-transform:rotate(0);} } @keyframes swing{ 20%{transform:rotate(15deg);} 40%{transform:rotate(-10deg);} 60%{transform:rotate(5deg);} 80%{transform:rotate(-5deg);} 100%{transform:rotate(0);} } /* 摇晃 */ @-webkit-keyframes wobble{ 0%{-webkit-transform:translateX(0);} 15%{-webkit-transform:translateX(-100px) rotate(-5deg);} 30%{-webkit-transform:translateX(80px) rotate(3deg);} 45%{-webkit-transform:translateX(-65px) rotate(-3deg);} 60%{-webkit-transform:translateX(40px) rotate(2deg);} 75%{-webkit-transform:translateX(-20px) rotate(-1deg);} 100%{-webkit-transform:translateX(0);} } @-moz-keyframes wobble{ 0%{-moz-transform:translateX(0);} 15%{-moz-transform:translateX(-100px) rotate(-5deg);} 30%{-moz-transform:translateX(80px) rotate(3deg);} 45%{-moz-transform:translateX(-65px) rotate(-3deg);} 60%{-moz-transform:translateX(40px) rotate(2deg);} 75%{-moz-transform:translateX(-20px) rotate(-1deg);} 100%{-moz-transform:translateX(0);} } @-ms-keyframes wobble{ 0%{-ms-transform:translateX(0);} 15%{-ms-transform:translateX(-100px) rotate(-5deg);} 30%{-ms-transform:translateX(80px) rotate(3deg);} 45%{-ms-transform:translateX(-65px) rotate(-3deg);} 60%{-ms-transform:translateX(40px) rotate(2deg);} 75%{-ms-transform:translateX(-20px) rotate(-1deg);} 100%{-ms-transform:translateX(0);} } @keyframes wobble{ 0%{transform:translateX(0);} 15%{transform:translateX(-100px) rotate(-5deg);} 30%{transform:translateX(80px) rotate(3deg);} 45%{transform:translateX(-65px) rotate(-3deg);} 60%{transform:translateX(40px) rotate(2deg);} 75%{transform:translateX(-20px) rotate(-1deg);} 100%{transform:translateX(0);} } /* 震铃 */ @-webkit-keyframes ring{ 0%{-webkit-transform:scale(1);} 10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);} 100%{-webkit-transform:scale(1) rotate(0);} } @-moz-keyframes ring{ 0%{-moz-transform:scale(1);} 10%,20%{-moz-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-moz-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);} 100%{-moz-transform:scale(1) rotate(0);} } @-ms-keyframes ring{ 0%{-ms-transform:scale(1);} 10%,20%{-ms-transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{-ms-transform:scale(1.1) rotate(3deg);} 40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);} 100%{-ms-transform:scale(1) rotate(0);} } @keyframes ring{ 0%{transform:scale(1);} 10%,20%{transform:scale(0.9) rotate(-3deg);} 30%,50%,70%,90%{transform:scale(1.1) rotate(3deg);} 40%,60%,80%{transform:scale(1.1) rotate(-3deg);} 100%{transform:scale(1) rotate(0);} } .page1_2{ -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay:0.5s; -ms-animation-delay: 0.5s; animation-delay:0.5s; } .page1_3{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay:1s; -ms-animation-delay: 1s; animation-delay:1s; } .page1_4{ -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; -o-animation-delay:1.5s; -ms-animation-delay: 1.5s; animation-delay:1.5s; } .page1_5{ -webkit-animation-delay: 2s; -moz-animation-delay: 2s; -o-animation-delay:2s; -ms-animation-delay: 2s; animation-delay:2s; } .page1_6{ -webkit-animation-delay:2.5s; -moz-animation-delay: 2.5s; -o-animation-delay:2.5s; -ms-animation-delay: 2.5s; animation-delay:2.5s; } .page1_7{ -webkit-animation-delay:3s; /*-webkit-animation-duration: 3s; 动画持续时间*/ -moz-animation-delay:3s; -o-animation-delay:3s; -ms-animation-delay: 3s; animation-delay:3s; } .page1_8{ -webkit-animation-delay:3.5s; /*-webkit-animation-duration: 3.5s; 动画持续时间*/ -moz-animation-delay:3.5s; -o-animation-delay:3.5s; -ms-animation-delay: 3.5s; animation-delay:3.5s; } .page1_9{ -webkit-animation-delay:4.5s; /*-webkit-animation-duration: 4.5s; 动画持续时间*/ -moz-animation-delay:4.5s; -o-animation-delay:4.5s; -ms-animation-delay: 4.5s; animation-delay:4.5s; } .page2_10{ -webkit-animation-delay:5s; -moz-animation-delay:5s; -o-animation-delay:5s; -ms-animation-delay:5s; animation-delay:5s;} .page2_11{ -webkit-animation-delay:11s; -moz-animation-delay:11s; -o-animation-delay:11s; -ms-animation-delay:11s; animation-delay:11s;} .img_7 {-webkit-animation-name: a-bounce; /*动画名称*/ -webkit-animation-duration: 10s; /*动画持续时间*/ -webkit-animation-iteration-count: 1; /*动画次数*/ -webkit-animation-delay: 0s; /*延迟时间*/} .page3_1{ -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay:0.3s; -ms-animation-delay: 0.3s; animation-delay:0.3s; } .page3_2{ -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s -o-animation-delay:0.6s -ms-animation-delay:0.6s animation-delay:0.6s } .page3_3{ -webkit-animation-delay: 0.9s; -moz-animation-delay: 0.9s; -o-animation-delay: 0.9s; -ms-animation-delay: 0.9s; animation-delay: 0.9s; } .page3_4{ -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; -o-animation-delay: 1.2s; -ms-animation-delay: 1.2s; animation-delay: 1.2s; } .page3_5{ -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -o-animation-delay:1.5s; -ms-animation-delay:1.5s; animation-delay:1.5s; }