代码拉取完成,页面将自动刷新
@import "/wxParse/wxParse.wxss";
view,text,input{
font-family:PingFang-SC-Medium;
}
.head {
width: 670rpx;
height: 367rpx;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 125rpx;
border-radius: 10rpx;
box-shadow: 0rpx 0rpx 8rpx 2rpx rgba(0, 0, 0, 0.2);
background-image: url('http://www.kiss-me.top/ticket/bg01.png');
background-size: 100% 100%;
}
.headLogo {
width: 100%;
height: 357rpx;
background-image: url('http://www.kiss-me.top/ticket/bg.png');
background-size: 100% 100%;
}
@font-face {
font-family: 'iconfont'; /* project id 717746 */
src: url('//at.alicdn.com/t/font_717746_ixpmedcnu5.eot');
src: url('//at.alicdn.com/t/font_717746_ixpmedcnu5.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_717746_ixpmedcnu5.woff') format('woff'),
url('//at.alicdn.com/t/font_717746_ixpmedcnu5.ttf') format('truetype'),
url('//at.alicdn.com/t/font_717746_ixpmedcnu5.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shanchu:before { content: "\e609"; }
.icon-sousuo:before { content: "\e615"; }
.icon-icon_arrow_top:before { content: "\e60e"; }
.icon-jiantouxia:before { content: "\e61e"; }
.icon-jiantou1:before { content: "\e65e"; }
.icon-ticket:before { content: "\e61c"; }
.icon-ticket1:before { content: "\e621"; }
.icon-jia:before { content: "\e620"; }
.icon-jian:before { content: "\e622"; }
.icon-jiantou:before { content: "\e612"; }
/* animation */
.Augly-bounce, .Augly-flip, .Augly-flash, .Augly-shake, .Augly-swing,
.Augly-wobble, .Augly-ring {
-webkit-animation: 1s ease;
animation: 1s ease;
}
.Augly-fadein, .Augly-fadeinT, .Augly-fadeinR, .Augly-fadeinB, .Augly-fadeinL,
.Augly-bouncein, .Augly-bounceinT, .Augly-bounceinR, .Augly-bounceinB,
.Augly-bounceinL, .Augly-rotatein, .Augly-rotateinLT, .Augly-rotateinLB,
.Augly-rotateinRT, .Augly-rotateinRB, .Augly-flipin, .Augly-flipinX,
.Augly-flipinY {
-webkit-animation: 600ms ease-out backwards;
animation: 600ms ease-out backwards;
}
.Augly-fadeout, .Augly-fadeoutT, .Augly-fadeoutR, .Augly-fadeoutB,
.Augly-fadeoutL, .Augly-bounceout, .Augly-bounceoutT, .Augly-bounceoutR,
.Augly-bounceoutB, .Augly-bounceoutL, .Augly-rotateout, .Augly-rotateoutLT,
.Augly-rotateoutLB, .Augly-rotateoutRT, .Augly-rotateoutRB, .Augly-flipout,
.Augly-flipoutX, .Augly-flipoutY {
-webkit-animation: 1s ease-in forwards;
animation: 1s ease-in forwards;
}
/* 淡入 */
.Augly-fadein {
-webkit-animation-name: fadein;
animation-name: fadein;
}
/* 淡入-从上 */
.Augly-fadeinT {
-webkit-animation-name: fadeinT;
animation-name: fadeinT;
}
/* 淡入-从右 */
.Augly-fadeinR {
-webkit-animation-name: fadeinR;
animation-name: fadeinR;
}
/* 淡入-从下 */
.Augly-fadeinB {
-webkit-animation-name: fadeinB;
animation-name: fadeinB;
}
/* 淡入-从左 */
.Augly-fadeinL {
-webkit-animation-name: fadeinL;
animation-name: fadeinL;
}
/* 淡出 */
.Augly-fadeout {
-webkit-animation-name: fadeout;
animation-name: fadeout;
}
/* 淡出-向上 */
.Augly-fadeoutT {
-webkit-animation-name: fadeoutT;
animation-name: fadeoutT;
}
/* 淡出-向右 */
.Augly-fadeoutR {
-webkit-animation-name: fadeoutR;
animation-name: fadeoutR;
}
/* 淡出-向下 */
.Augly-fadeoutB {
-webkit-animation-name: fadeoutB;
animation-name: fadeoutB;
}
/* 淡出-向左 */
.Augly-fadeoutL {
-webkit-animation-name: fadeoutL;
animation-name: fadeoutL;
}
/* 弹跳 */
.Augly-bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
/* 弹入 */
.Augly-bouncein {
-webkit-animation-name: bouncein;
animation-name: bouncein;
}
/* 弹入-从上 */
.Augly-bounceinT {
-webkit-animation-name: bounceinT;
animation-name: bounceinT;
}
/* 弹入-从右 */
.Augly-bounceinR {
-webkit-animation-name: bounceinR;
animation-name: bounceinR;
}
/* 弹入-从下 */
.Augly-bounceinB {
-webkit-animation-name: bounceinB;
animation-name: bounceinB;
}
/* 弹入-从左 */
.Augly-bounceinL {
-webkit-animation-name: bounceinL;
animation-name: bounceinL;
}
/* 弹出 */
.Augly-bounceout {
-webkit-animation-name: bounceout;
animation-name: bounceout;
}
/* 弹出-向上 */
.Augly-bounceoutT {
-webkit-animation-name: bounceoutT;
animation-name: bounceoutT;
}
/* 弹出-向右 */
.Augly-bounceoutR {
-webkit-animation-name: bounceoutR;
animation-name: bounceoutR;
}
/* 弹出-向下 */
.Augly-bounceoutB {
-webkit-animation-name: bounceoutB;
animation-name: bounceoutB;
}
/* 弹出-向左 */
.Augly-bounceoutL {
-webkit-animation-name: bounceoutL;
animation-name: bounceoutL;
}
/* 转入 */
.Augly-rotatein {
-webkit-animation-name: rotatein;
animation-name: rotatein;
}
/* 转入-从左上 */
.Augly-rotateinLT {
-webkit-animation-name: rotateinLT;
animation-name: rotateinLT;
}
/* 转入-从左下 */
.Augly-rotateinLB {
-webkit-animation-name: rotateinLB;
animation-name: rotateinLB;
}
/* 转入-从右上 */
.Augly-rotateinRT {
-webkit-animation-name: rotateinRT;
animation-name: rotateinRT;
}
/* 转入-从右下*/
.Augly-rotateinRB {
-webkit-animation-name: rotateinRB;
animation-name: rotateinRB;
}
/* 转出 */
.Augly-rotateout {
-webkit-animation-name: rotateout;
animation-name: rotateout;
}
/* 转出-向左上 */
.Augly-rotateoutLT {
-webkit-animation-name: rotateoutLT;
animation-name: rotateoutLT;
}
/* 转出-向左下 */
.Augly-rotateoutLB {
-webkit-animation-name: rotateoutLB;
animation-name: rotateoutLB;
}
/* 转出-向右上 */
.Augly-rotateoutRT {
-webkit-animation-name: rotateoutRT;
animation-name: rotateoutRT;
}
/* 转出-向右下 */
.Augly-rotateoutRB {
-webkit-animation-name: rotateoutRB;
animation-name: rotateoutRB;
}
/* 翻转 */
.Augly-flip {
-webkit-animation-name: flip;
animation-name: flip;
}
/* 翻入-X轴 */
.Augly-flipinX {
-webkit-animation-name: flipinX;
animation-name: flipinX;
}
/* 翻入-Y轴 */
.Augly-flipin, .Augly-flipinY {
-webkit-animation-name: flipinY;
animation-name: flipinY;
}
/* 翻出-X轴 */
.Augly-flipoutX {
-webkit-animation-name: flipoutX;
animation-name: flipoutX;
}
/* 翻出-Y轴 */
.Augly-flipout, .Augly-flipoutY {
-webkit-animation-name: flipoutY;
animation-name: flipoutY;
}
/* 闪烁 */
.Augly-flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* 震颤 */
.Augly-shake {
-webkit-animation-name: shake;
animation-name: shake;
}
/* 摇摆 */
.Augly-swing {
-webkit-animation-name: swing;
animation-name: swing;
}
/* 摇晃 */
.Augly-wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
/* 震铃 */
.Augly-ring {
-webkit-animation-name: ring;
animation-name: ring;
}
/* define */
/* 淡入 */
@-webkit-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);
}
}
@keyframes fadeinT {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/* 淡入-从右 */
@-webkit-keyframes fadeinR {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeinR {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/* 淡入-从下 */
@-webkit-keyframes fadeinB {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@keyframes fadeinB {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
/* 淡入-从左 */
@-webkit-keyframes fadeinL {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@keyframes fadeinL {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/* 淡出 */
@-webkit-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);
}
}
@keyframes fadeoutT {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
}
/* 淡出-向右 */
@-webkit-keyframes fadeoutR {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(100px);
}
}
@keyframes fadeoutR {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
}
/* 淡出-向下 */
@-webkit-keyframes fadeoutB {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(100px);
}
}
@keyframes fadeoutB {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
}
/* 淡出-向左 */
@-webkit-keyframes fadeoutL {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-100px);
}
}
@keyframes fadeoutL {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-100px);
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);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
/* 弹入 */
@-webkit-keyframes bouncein {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes bouncein {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
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);
}
}
@keyframes bounceinT {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
transform: translateY(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
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);
}
}
@keyframes bounceinR {
0% {
opacity: 0;
-webkit-transform: translateX(100px);
transform: translateX(100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/* 弹入-从下 */
@-webkit-keyframes bounceinB {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
@keyframes bounceinB {
0% {
opacity: 0;
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
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);
}
}
@keyframes bounceinL {
0% {
opacity: 0;
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
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);
}
}
@keyframes bounceout {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
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);
}
}
@keyframes bounceoutT {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-100px);
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);
}
}
@keyframes bounceoutR {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(100px);
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);
}
}
@keyframes bounceoutB {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(100px);
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);
}
}
@keyframes bounceoutL {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
}
}
/* 转入 */
@-webkit-keyframes rotatein {
0% {
opacity: 0;
-webkit-transform: rotate(-200deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(0);
}
}
@keyframes rotatein {
0% {
opacity: 0;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(0);
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;
}
}
@keyframes rotateinLT {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
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;
}
}
@keyframes rotateineftB {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
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;
}
}
@keyframes rotateinRT {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
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;
}
}
@keyframes rotateinRB {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
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;
}
}
@keyframes rotateout {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
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;
}
}
@keyframes rotateoutLT {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
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;
}
}
@keyframes rotateoutLB {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
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;
}
}
@keyframes rotateoutRT {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
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;
}
}
@keyframes rotateoutBR {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
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;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) rotateY(0);
transform: perspective(400px) rotateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
transform: perspective(400px) translateZ(150px) rotateY(170deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
transform: perspective(400px) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) scale(1);
transform: perspective(400px) scale(1);
-webkit-animation-timing-function: ease-in;
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;
}
}
@keyframes flipinX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0);
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;
}
}
@keyframes flipinY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0);
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;
}
}
@keyframes flipoutX {
0% {
-webkit-transform: perspective(400px) rotateX(0);
transform: perspective(400px) rotateX(0);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
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;
}
}
@keyframes flipoutY {
0% {
-webkit-transform: perspective(400px) rotateY(0);
transform: perspective(400px) rotateY(0);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
/* 闪烁 */
@-webkit-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);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
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);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0);
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);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
15% {
-webkit-transform: translateX(-100px) rotate(-5deg);
transform: translateX(-100px) rotate(-5deg);
}
30% {
-webkit-transform: translateX(80px) rotate(3deg);
transform: translateX(80px) rotate(3deg);
}
45% {
-webkit-transform: translateX(-65px) rotate(-3deg);
transform: translateX(-65px) rotate(-3deg);
}
60% {
-webkit-transform: translateX(40px) rotate(2deg);
transform: translateX(40px) rotate(2deg);
}
75% {
-webkit-transform: translateX(-20px) rotate(-1deg);
transform: translateX(-20px) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0);
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);
}
}
@keyframes ring {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
button::after {
border: none;
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。