/* 阿里巴巴矢量图标库 start */ @font-face { font-family: "iconfont"; /* Project id 3180711 */ src: url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff2?t=1651830764889') format('woff2'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.woff?t=1651830764889') format('woff'), url('https://at.alicdn.com/t/font_3180711_atv5gkgm4w4.ttf?t=1651830764889') format('truetype'); } .icon { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-del:before { content: "\e718"; } .icon-cut:before { content: "\e609"; } .icon-add:before { content: "\e60a"; } .icon-add-picture05:before { content: "\e639"; } .icon-add-picture04:before { content: "\e636"; } .icon-add-picture03:before { content: "\e642"; } .icon-add-picture02:before { content: "\e8bc"; } .icon-add-picture01:before { content: "\e62c"; } .icon-sandian:before { content: "\e769"; } .icon-nothing-collection:before { content: "\e610"; } .icon-nothing-more:before { content: "\e624"; } .icon-nothing-data:before { content: "\e60c"; } .icon-address-check:before { content: "\e6c2"; } .icon-address-unchecked:before { content: "\e623"; } .icon-navigate-now:before { content: "\e640"; } .icon-send-goods:before { content: "\e601"; } .icon-payment:before { content: "\e602"; } .icon-finish:before { content: "\e63f"; } .icon-take:before { content: "\e649"; } .icon-refund:before { content: "\e613"; } .icon-customer-black:before { content: "\ec2e"; } .icon-customer:before { content: "\e628"; } .icon-check:before { content: "\e61e"; } .icon-del-white:before { content: "\e61f"; } .icon-screen:before { content: "\e60b"; } .icon-search:before { content: "\e653"; } .icon-caidan-mo:before { content: "\e73e"; } .icon-renwu-mo:before { content: "\e73f"; } .icon-shop-cart:before { content: "\e73d"; } .icon-caidan-active:before { content: "\e608"; } .icon-renwu-acitve:before { content: "\e67c"; } .icon-home-mo:before { content: "\e673"; } .icon-home-active:before { content: "\e674"; } .icon-return:before { content: "\e600"; } .icon-next:before { content: "\e60e"; } /* 阿里巴巴矢量图标库 end */ /* 项目基础样式 start */ /* flex布局 */ .flex {display: flex;} /* 盒模型 */ .border-box{box-sizing: border-box;} /* 背景颜色 */ .background-white{background-color: #ffffff;} .background-orange{background-color: #febf00;} .background-grey{background-color: #484848;} /* 圆角 */ .radius10{border-radius: 10rpx;} .radius15{border-radius: 15rpx;} .radius20{border-radius: 20rpx;} .radius25{border-radius: 25rpx;} .radius30{border-radius: 30rpx;} .radius35{border-radius: 35rpx;} .radius40{border-radius: 40rpx;} .radius100{border-radius: 100%;} /* 外边距 */ .mar-sxc10{margin: 10rpx auto;} .mar-sxc15{margin: 15rpx auto;} .mar-sxc20{margin: 20rpx auto;} .mar-sxc25{margin: 25rpx auto;} .mar-sxc30{margin: 30rpx auto;} .mar-sx10{margin: 10rpx 0;} .mar-sx15{margin: 15rpx 0;} .mar-sx20{margin: 20rpx 0;} .mar-sx25{margin: 25rpx 0;} .mar-sx30{margin: 30rpx 0;} .mar-zy10{margin: 0 10rpx;} .mar-zy15{margin: 0 15rpx;} .mar-zy20{margin: 0 20rpx;} .mar-zy25{margin: 0 25rpx;} .mar-zy30{margin: 0 30rpx;} .mar-s10{margin-top: 10rpx;} .mar-s15{margin-top: 15rpx;} .mar-s20{margin-top: 20rpx;} .mar-s25{margin-top: 25rpx;} .mar-s30{margin-top: 30rpx;} .mar-s35{margin-top: 35rpx;} .mar-s40{margin-top: 40rpx;} .mar-s50{margin-top: 50rpx;} .mar-s60{margin-top: 60rpx;} .mar-s70{margin-top: 70rpx;} .mar-s80{margin-top: 80rpx;} .mar-x10{margin-bottom: 10rpx;} .mar-x15{margin-bottom: 15rpx;} .mar-x20{margin-bottom: 20rpx;} .mar-x25{margin-bottom: 25rpx;} .mar-x30{margin-bottom: 30rpx;} .mar-x35{margin-bottom: 35rpx;} .mar-x40{margin-bottom: 40rpx;} .mar-x50{margin-bottom: 50rpx;} .mar-x60{margin-bottom: 60rpx;} .mar-x70{margin-bottom: 70rpx;} .mar-x80{margin-bottom: 80rpx;} /* 内边距 */ .pad-all10{padding: 10rpx;} .pad-all15{padding: 15rpx;} .pad-all20{padding: 20rpx;} .pad-all25{padding: 25rpx;} .pad-all30{padding: 30rpx;} .pad-all35{padding: 35rpx;} .pad-all40{padding: 40rpx;} .pad-sx10{padding: 10rpx 0;} .pad-sx15{padding: 15rpx 0;} .pad-sx20{padding: 20rpx 0;} .pad-sx25{padding: 25rpx 0;} .pad-sx30{padding: 30rpx 0;} .pad-sx35{padding: 35rpx 0;} .pad-sx40{padding: 40rpx 0;} .pad-zy10{padding: 0 10rpx;} .pad-zy15{padding: 0 15rpx;} .pad-zy20{padding: 0 20rpx;} .pad-zy25{padding: 0 25rpx;} .pad-zy30{padding: 0 30rpx;} .pad-zy35{padding: 0 35rpx;} .pad-zy40{padding: 0 40rpx;} .pad-x130{padding-bottom: 130rpx;} .pad-x140{padding-bottom: 140rpx;} .pad-x150{padding-bottom: 150rpx;} .pad-x160{padding-bottom: 160rpx;} .pad-x170{padding-bottom: 170rpx;} .pad-x180{padding-bottom: 180rpx;} .pad-x190{padding-bottom: 190rpx;} /* 字体 */ .font18{ font-size: 18rpx;} .font20{ font-size: 20rpx;} .font22{ font-size: 22rpx;} .font24{ font-size: 24rpx;} .font26{ font-size: 26rpx;} .font28{ font-size: 28rpx;} .font30{ font-size: 30rpx;} .font32{ font-size: 32rpx;} .font34{ font-size: 34rpx;} .font36{ font-size: 36rpx;} .font38{ font-size: 38rpx;} .font40{ font-size: 40rpx;} .font42{ font-size: 42rpx;} .font44{ font-size: 44rpx;} .font46{ font-size: 46rpx;} .font48{ font-size: 48rpx;} .font60{ font-size: 60rpx;} .color-ff{ color: #ffffff;} .color-00{ color: #000000;} .color-48{ color: #484848;} .color-66{ color: #666666;} .color-99{ color: #999999;} .color-orange{color: #febf00;} .color-red{ color: #dd062f;} .color-8c{ color: #8c8c9b;} /* 文字行数 */ .clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips4{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips5{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 5;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips6{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips7{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips8{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 8;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips9{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 9;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} .clips10{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 10;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} image{ /* 照顾低版本浏览器 如果图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 ① */ vertical-align: middle; /* 取消图片底侧有空白缝隙的问题 ② */ object-fit: cover; } /* 去除滚动条 */ scroll-view ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 圆圈中间一个原点 start */ .mo-item { width: 30rpx; height: 30rpx; border-radius: 100%; border: 2rpx solid #000000; box-sizing: border-box; } .active-item{ position: relative; display: flex; justify-content: center; align-items: center; border: 2rpx solid #FF0000; } .active-item::before{ content: ''; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 20rpx; height: 20rpx; border-radius: 100%; background-color: #FF0000; } /* 项目基础样式 end */ /* 项目页面样式 start */ page {background-color: #FFFFFF;} /* 登录页 staat */ .login-header { justify-content: center; align-items: center; flex-direction: column; margin-top: 0; position: fixed; left: 50%; top: 40%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .infoImg { width: 224rpx; height: 224rpx; border-radius: 100%; border: 2rpx solid #d8d8d8; } .logo-name { font-size: 30rpx; margin-top: 30rpx; color: #333333; text-align: center; } .login-footer { width: 100%; text-align: center; position: fixed; left: 0; bottom: 120rpx; } .login-btn { width: calc(100% - 60rpx); line-height: 100rpx; margin: 0 auto; box-shadow: 0rpx 8rpx 20rpx rgba(254,191,0,.75); } .login-txt { justify-content: center; align-items: center; color: #333333; margin-top: 30rpx; } .agreement-box{ margin-top: 30rpx; } .agreement{ color: #febf00; } /* 首页 */ .index-top{ width: 100%; height: 500rpx; position: relative; z-index: 0; } .index-top image{ width: 100%; min-height: 420rpx; } /* 内容区 */ .index-content{ width: 100%; border-radius: 20rpx 20rpx 0 0; margin-top: -20rpx; position: relative; z-index: 1; } /* 顶部背景 */ .index-statis-bg{ width: 100%; position: fixed; top: 0; left: 0; z-index: 9; } /* 搜索框 */ .pull-search-bg{ height: 140rpx; } .pull-search{ align-items: center; width: calc(100% - 80rpx); height: 80rpx; background-color: #eaeaea; margin: 0 auto; } .pull-search>.img{ width: 42rpx; height: 42rpx; margin-left: 18rpx; } .pull-search>.input{ width: calc(100% - 60rpx); } /* 分类 */ .index-cate-bg{ position: -webkit-sticky; position: sticky; left: 0; z-index: 9; } .index-cate-bg.show{ box-shadow: 0 7rpx 7rpx rgba(0,0,0,.18); } .index-cate{ width: 100%; margin: 5rpx auto 0; border-bottom: 2rpx solid #eaeaea; } .index-cate.show{ border-bottom: 0; } .pull-title .txt{ line-height: 1.5; letter-spacing: 2rpx; } .pull-title .line{ width: 62rpx; height: 8rpx; border-radius: 4rpx; } /* 分类列表 */ .cate-list{ padding: 24rpx 0 42rpx; } .cate-list .cate-item{ width: 100rpx; margin: 0 29rpx; } .cate-list .cate-item:first-child{ margin-left: 0; } .cate-list .cate-item:last-child{ margin-right: 0; } .cate-list .cate-item>.img{ width: 100rpx; height: 100rpx; } .cate-list .cate-item>.img image{ width: 100%; min-height: 100%; } .cate-list .cate-item>.txt{ line-height: 1.5; text-align: center; } /* 商品列表 */ .commodity{ flex-wrap: wrap; justify-content: space-between; } .commodity .item{ width: calc(50% - 10rpx); box-shadow: 0 0 20rpx rgba(0,0,25,.12); overflow: hidden; } .commodity .item>.img{ width: 100%; height: 230rpx; overflow: hidden; } .commodity .item>.img image{ width: 100%; min-height: 230rpx; } .commodity .title{ line-height: 1.4; } .commodity .bottom{ justify-content: space-between; align-items: center; } .commodity .bottom>.btn{ justify-content: center; align-items: center; width: 150rpx; height: 52rpx; border-radius: 23rpx; } /* 到底了 */ .no-more{ color: #8c8c9b; text-align: center; line-height: 1.5; margin: 60rpx 0 25rpx; text-align: center; } /* 搜索结果 */ .search-box{ width: 100%; position: fixed; left: 0; top: 0; z-index: 999; } .close-box{ width: 100%; } /* 搜索框 */ .search-bg{ height: 140rpx; border-radius: 20rpx 20rpx 0 0; } .search{ align-items: center; width: calc(100% - 80rpx); height: 80rpx; background-color: #eaeaea; margin: 0 auto; } .search>.img{ width: 42rpx; height: 42rpx; margin-left: 18rpx; } .search>.input{ width: calc(100% - 60rpx); } .keyword-txt{ line-height: 1.5; padding-bottom: 10rpx; text-align: center; } .search-list{ height: calc(100% - 205rpx); } .search-list .item:nth-of-type(1), .search-list .item:nth-of-type(2){ margin-top: 30rpx !important; } .search-list .item:last-child{ margin-bottom: 20rpx; } /* 商品详情 */ .scrool-top{ width: 100%; position: fixed; top: 0; left: 0; z-index: 99; } .back-btn{ align-items: center; width: 35px; height: 35px; position: fixed; left: 20rpx; z-index: 999; } .shop-top-img{ width: 100%; position: relative; } .shop-top-img>image{ width: 100%; } .shop-top-img .video-bg{ width: 100%; height: 100%; background-color: rgba(0,0,0,.3); position: absolute; left: 0; top: 0; z-index: 1; } .shop-top-img .video-btn{ width: 160rpx; height: 160rpx; position: absolute; left: 50%; top: 50%; z-index: 99; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .shop-top-img .video-btn>image{ width: 100%; height: 100%; } .shop-content{ border-radius: 20rpx 20rpx 0 0; margin-top: -20rpx; position: relative; z-index: 9; } .shop-title{ line-height: 1.5; text-align: justify; padding: 10rpx 0 20rpx; border-bottom: 2rpx solid #eaeaea; } .body-txt{ line-height: 1.5; text-align: justify; padding-top: 20rpx; } /* 尾部 */ .shop-foot{ width: 100%; height: 170rpx; position: fixed; left: 0; bottom: 0; z-index: 99; } .shop-footer{ align-items: center; height: 100rpx; } .shop-footer .shop-nav{ flex-wrap: wrap; justify-content: center; align-items: center; width: 144rpx; height: 100%; border-right: 2rpx solid #FFFFFF; } .shop-footer .shop-nav>image{ width: 39rpx; height: 40rpx; } .shop-footer .shop-nav>text{ width: 100%; line-height: 1.2; text-align: center; } .shop-footer .shop-cart{ justify-content: center; align-items: center; width: 88rpx; height: 88rpx; margin: 0 50rpx 0 58rpx; position: relative; } .shop-footer .shop-cart>.shop-num{ justify-content: center; align-items: center; width: 38rpx; height: 38rpx; background-color: #e4143b; position: absolute; top: 0; right: -10rpx; z-index: 1; } .shop-footer .shop-cart image{ width: 46rpx; height: 45rpx; } .shop-btn{ justify-content: center; align-items: center; width: 340rpx; height: 86rpx; } /* 商品规格 */ .pull-bg{ width: 100%; height: 100vh; background-color: rgba(0,0,0,.47); position: fixed; left: 0; top: 0; z-index: 99; } .shop-specs{ width: 100%; padding: 20rpx 40rpx 30rpx; border-radius: 30rpx 30rpx 0 0; position: fixed; left: 0; bottom: 0; z-index: 999; } .specs-top{ justify-content: space-between; align-items: center; height: 66rpx; } .specs-top .close{ width: 66rpx; height: 66rpx; } .specs-top .close>image{ width: 100%; } .specs-list{ padding-top: 30rpx; max-height: 418rpx; } .specs-item{ justify-content: space-between; align-items: center; width: 100%; height: 106rpx; border: 2rpx solid #484848; } .specs-item.active{ background-color: #febf00; color: #ffffff; border: 0; } .specs-btns{ width: 100%; justify-content: space-between; align-items: center; margin-top: 50rpx; } .specs-btns>.btn{ justify-content: center; align-items: center; width: calc(50% - 16rpx); height: 98rpx; box-shadow: 0 0 10rpx rgba(254,191,0, .42); } .specs-btns>.btn:last-child{ box-shadow: 0 0 10rpx rgba(72,72,72, .42); } /* 公共底部 */ .pull-footer-bg{ position: fixed; width: 100%; left: 0; bottom: 0; z-index: 999; } .pull-footer{ justify-content: space-between; align-items: center; } .pull-footer .price{ line-height: 1.2; } .pull-footer .btn{ justify-content: center; align-items: center; width: 280rpx; height: 86rpx; margin: 2rpx 0; } /* 订单确认 */ .settlement-content .section{ box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12); } .settlement-content .section>.title{ margin-bottom: 30rpx; } .addressee-info { align-items: center; } .addressee-info .txt{ width: calc(100% - 35rpx); } .addressee-info .txt>view>text{ margin-left: 55rpx; } .addressee-info .txt>.txt-coding{ justify-content: space-between; align-items: center; } .addressee-info .txt>.txt-coding>text{ margin-left: 0; } .addressee-info image{ width: 18rpx; height: 34rpx; margin-left: 15rpx; } .shop-slide-item .item{ align-items: center; width: 100%; padding: 30rpx 0; margin: 0 auto; border-bottom: 2rpx solid #eaeaea; } .shop-slide-item .item:first-child{ padding-top: 10rpx; } .shop-slide-item .item:last-child{ padding-bottom: 10rpx; border: 0; } .shop-slide-item .shop-img{ width: 194rpx; height: 194rpx; margin-right: 36rpx; overflow: hidden; } .shop-slide-item .shop-img image{ width: 100%; min-height: 194rpx; } .shop-slide-item .shop-txt{ width: calc(100% - 230rpx); } .shop-slide-item .shop-txt-top{ min-height: 134rpx; } .shop-slide-item .shop-txt-top .title{ line-height: 1.5; } .shop-slide-item .shop-txt-top .specs{ line-height: 1.5; } .shop-slide-item .shop-txt-bottom{ justify-content: space-between; align-items: center; width: 100%; height: 50rpx; } .shop-slide-item .shop-txt-bottom .price{ line-height: 1.5; } .shop-slide-item .shop-txt-bottom .price>text{ margin-left: 12rpx; } .settlement-content .section-list .item{ justify-content: space-between; align-items: center; margin-bottom: 40rpx; } .settlement-content .section-list .item:nth-last-of-type(1){ margin-bottom: 0; } .settlement-content .item .radio{ display: flex; align-items: center; } .settlement-content .item .radio>radio{ -webkit-transform: scale(.8); transform: scale(.8); margin-left: -5rpx; } .settlement-content .item .txt{ justify-content: flex-end; align-items: center; } .settlement-content .item .btn{ display: flex; align-items: center; width: 20rpx; height: 36rpx; margin-left: 15rpx; } .settlement-content .item .btn>image{ width: 14rpx; } /* 优惠券选择 */ .coupon-box{ width: 100%; border-radius: 30rpx 30rpx 0 0; position: fixed; left: 0; bottom: 0; z-index: 999; } .coupon-box .title{ text-align: center; } .coupon-box .coupon-list .coupon-item:first-child{ margin-top: 0; } .coupon-scoll{ max-height: 656rpx; } .coupon-btns{ justify-content: space-between; align-items: center; } .coupon-btns .btn{ width: calc(50% - 27rpx); line-height: 98rpx; text-align: center; } /* 支付成功 */ .finish-content .finish-img{ justify-content: center; height: 337rpx; margin: 105rpx 0 70rpx; } .finish-content .finish-img>image{ width: 337rpx; height: 337rpx; } .finish-content .finish-txt{ text-align: center; line-height: 1.5; padding-bottom: 120rpx; } .finish-content .finish-btns{ padding: 0 65rpx; } .finish-content .finish-btns .btn{ justify-content: center; align-items: center; height: 98rpx; border: 2rpx solid #eaeaea; margin-top: 50rpx; } .finish-content .finish-btns .btn:nth-of-type(1){ border: 0; } /* 我的 */ .my-top{ position: relative; } .my-bg{ width: 100%; } .my-bg>image{ width: 100%; } .my-herder{ width: 100%; position: absolute; left: 0; bottom: 0; z-index: 1; } .my-message{ align-items: center; width: 100%; } .my-portrait{ width: 142rpx; height: 142rpx; margin-right: 36rpx; overflow: hidden; } .my-portrait>image{ width: 100%; } .my-txt{ flex-wrap: wrap; width: calc(100% - 178rpx); } .my-nickname{ align-items: center; width: 100%; } .my-nickname>image{ width: 32rpx; margin-left: 26rpx; } .my-vip-txt{ width: auto; line-height: 50rpx; } .my-money{ justify-content: space-around; text-align: center; margin: 44rpx 0 40rpx; } .my-money .item{ line-height: 1.2; } .my-order{ justify-content: space-around; align-items: center; height: 130rpx; border-radius: 30rpx 30rpx 0 0 ; } .my-order .item>.img{ justify-content: center; align-items: flex-end; width: 50rpx; height: 50rpx; margin: 0 auto; position: relative; } .my-order .item>.img>.point{ justify-content: center; align-items: center; width: 32rpx; height: 32rpx; background-color: #fe002a; position: absolute; top: -14rpx; right: -14rpx; z-index: 1; } .my-order .item>.txt{ line-height: 1.2; margin-top: 12rpx; } .my-content .item{ justify-content: space-between; align-items: center; height: 80rpx; position: relative; } .my-content .item .get-phone-btn{ opacity: 0; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; } .my-content .item>.title{ align-items: center; } .my-content .item>.title .img{ width: 62rpx; } /* 会员申请 */ .vip-box-bg{ padding: 34rpx 40rpx 0; width: 100%; position: fixed; left: 0; top: 50%; z-index: 999; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .vip-box{ padding: 50rpx 60rpx 60rpx; line-height: 1.5; position: relative; } .vip-box .title{ text-align: center; } .vip-box .input{ height: 80rpx; border-bottom: 2rpx solid #e6e6e6; } .vip-box .close-btn{ width: 76rpx; height: 76rpx; position: absolute; top: -34rpx; right: -30rpx; } .vip-box .close-btn>image{ width: 100%; } .vip-box .submit-btn{ justify-content: center; align-items: center; height: 98rpx; } .vip-box .submit-btn>image{ width: 56rpx; margin-right: 30rpx; } .vip-box .addr-input{ width: 100%; justify-content: space-between; align-items: center; position: relative; } .vip-box .addr-input .input-box{ justify-content: space-between; align-items: center; width: calc(33% - 20rpx); border-bottom: 2rpx solid #e6e6e6; } .vip-box .addr-input .input-box .input-flex{ width: calc(100% - 35rpx); height: 80rpx; } .vip-box .addr-input .input-box>image{ width: 15rpx; height: 28rpx; } .vip-box .shear-btn{ width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1; } /* 个人中心 */ .ucenter-bg{ width: 100%; background-color: #f5f5f5; padding-top: 20rpx; } .ucenter{ padding: 30rpx; background-color: #FFFFFF; } .ucenter .item{ flex-wrap: nowrap; align-items: center; height: 100rpx; position: relative; } .ucenter .item .title{ width: 170rpx; font-size: 30rpx; color: #000000; } .ucenter .item .more{ margin-left: 20rpx; } .ucenter .item .more image{ width: 14rpx; height: 26rpx; } .ucenter .item .msg{ width: calc(100% - 204rpx); height: 60rpx; font-size: 24rpx; color: #8c8c9b; text-align: right; } .ucenter .item-first{ justify-content: space-between; height: 146rpx; padding: 5rpx 0; } .ucenter .item .img{ width: 136rpx; height: 136rpx; border-radius: 100%; margin-right: 34rpx; overflow: hidden; } .ucenter .item .img image{ width: 136rpx; min-height: 136rpx; } .ucenter .get-phone-btn{ display: block; width: 100%; height: 100rpx; opacity: 0; position: absolute; left: 0; top: 0; z-index: 9; } /* 地址管理 */ .addr-info{ position: relative; } .addr-info .txt>view{ margin-bottom: 12rpx; } .addr-info>.change-btn{ padding: 5rpx 10rpx 6rpx; border-radius: 8rpx; position: absolute; top: 0; right: 0; } .addr-bottom{ justify-content: space-between; align-items: center; width: 100%; } .addr-bottom .radio{ align-items: center; } .addr-bottom .radio>radio{ -webkit-transform: scale(.8); transform: scale(.8); margin-left: -6rpx; } .addr-bottom .btns{ justify-content: space-between; align-items: center; width: 140rpx; } /* 公共底部按钮 */ .pull-btn{ width: 100%; padding: 20rpx 20rpx 30rpx; position: fixed; left: 0; bottom: 0; z-index: 99; } .pull-btn .btn{ justify-content: center; align-items: center; height: 98rpx; } .pull-btn .btn.border-btn{ border: 2rpx solid #d3d3d3; } /* 我的余额 */ .recharge{ width: 100%; padding: 15rpx 20rpx; } .recharge-msg{ height: 256rpx; padding: 40rpx 40rpx 40rpx 64rpx; box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAEACAYAAACwMbCBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YTgxMTE3OS0xMGM5LTQ2OTQtOWFhYS0wYzdiYWFmYWQ5NDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NURGQjE3RjYwQzg4MTFFREFCM0Q5MjkxQkFFRTJGODciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NURGQjE3RjUwQzg4MTFFREFCM0Q5MjkxQkFFRTJGODciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxMTViOTUzNi1hNmNiLTRmNWItYjE3Yy01ZGU3ZGIzNTgyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NWE4MTExNzktMTBjOS00Njk0LTlhYWEtMGM3YmFhZmFkOTQwIi8+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); background-size: 100%; line-height: 1.5; overflow: hidden; } .recharge-msg .txt{ justify-content: space-between; align-items: center; text-indent: 8rpx; } .recharge-msg .price{ margin-top: 35rpx; } .recharge-title{ align-items: center; line-height: 2; } .recharge-title>.line{ width: 8rpx; height: 35rpx; border-radius: 4rpx; margin-right: 10rpx; } .amount-list{ flex-wrap: wrap; } .amount-item{ width: calc(33.33% - 17rpx); height: 144rpx; margin-right: 24rpx; text-align: center; border: 2rpx solid #e6e6e6; color: #575a66; line-height: 1.4; } .amount-list .amount-item:nth-of-type(3n){ margin-right: 0; } .amount-item.checked{ background-color: #fce8aa; color: #fe6c00; border: 2rpx solid #febf00; } .detailed-list .detailed-item{ justify-content: space-between; align-items: center; border-bottom: 2rpx solid #e6e6e6; } /* 分销管理 */ .distribution{ width: 100%; padding: 15rpx 20rpx; } .distribution-msg{ height: 422rpx; box-shadow: 0 9rpx 21rpx rgba(254,191,0,.56); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsYAAAGmCAYAAAB/dEJyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo1YTgxMTE3OS0xMGM5LTQ2OTQtOWFhYS0wYzdiYWFmYWQ5NDAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OThBQzQ3NjkwQ0IyMTFFREE3N0RCOTdFM0EyRjRBRUQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OThBQzQ3NjgwQ0IyMTFFREE3N0RCOTdFM0EyRjRBRUQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0OTlmYmEzYi01ZjY4LTRlMDYtYjAxMS1lMTg0YThjMTAyNjgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NWE4MTExNzktMTBjOS00Njk0LTlhYWEtMGM3YmFhZmFkOTQwIi8+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); background-size: 100%; line-height: 1.5; overflow: hidden; } .distribution-txt{ justify-content: space-between; align-items: flex-start; border-bottom: 2rpx solid rgba(255,255,255,.43); } .distribution-txt .txt{ padding-bottom: 30rpx; } .distribution-txt .txt>.title{ text-indent: 8rpx; } .distribution-txt .code-btn{ text-align: center; } .distribution-profit{ justify-content: space-between; align-items: center; width: 100%; } .distribution-profit .item{ text-align: center; } .distribution-profit .line{ width: 2rpx; height: 80rpx; background-color: rgba(255,255,255,.6); } .record-nav{ justify-content: center; align-items: center; width: 100%; margin: 45rpx 0 40rpx; } .record-nav .item{ min-width: 210rpx; line-height: 80rpx; text-align: center; } .record-nav .item.cur{ background-color: #febf00; color: #000000; } .record-list{ background-color: #f5f5f5; padding: 10rpx 20rpx; } .record-list .record-item{ justify-content: space-between; align-items: center; border-bottom: 2rpx solid #e6e6e6; } .record-list .record-item:last-child{ border-bottom: 0; } .record-item .left{ align-items: center; } .record-item .img{ width: 100rpx; height: 100rpx; margin-right: 26rpx; overflow: hidden; } .record-item .img>image{ width: 100%; min-height: 100rpx; } .record-item .right{ text-align: right; } .vip-code{ justify-content: center; padding: 100rpx 0 40rpx; } .vip-code>image{ width: 466rpx; height: auto; } .team-nav{ justify-content: center; align-items: center; } .team-nav .item{ margin: 0 45rpx; line-height: 1.5; } .team-nav .line{ height: 10rpx; border-radius: 5rpx; } /* 优惠券 */ .coupon-list{ padding-bottom: 30rpx; } .coupon-item{ align-items: center; height: 182rpx; background-color: #fff3ec; overflow: hidden; } .coupon-item:nth-of-type(1){ margin-top: 30rpx; } .coupon-item .price{ width: 195rpx; height: 182rpx; background-image: linear-gradient(to right,#ff9547,#ff6f0c); font-size: 72rpx; line-height: 102rpx; text-indent: 20rpx; padding-top: 40rpx; margin-right: 35rpx; } .coupon-item .txt{ width: calc(100% - 390rpx); } .coupon-item .btn{ width: 120rpx; line-height: 56rpx; border-radius: 28rpx; background-color: #ff6f0c; text-align: center; } .coupon-item.grey{ background-color: #f5f5f5; } .coupon-item.grey .price{ background-image: linear-gradient(to right,#666666,#666666); } .coupon-item.grey .txt{ width: calc(100% - 250rpx); } /* 免责声明 */ .disclaimers{ padding: 20rpx 30rpx; } .disclaimers-title{ line-height: 1.5; margin-bottom: 30rpx; text-align: center; } .disclaimers-txt{ line-height: 1.8; text-align: justify; } /* 订单管理 */ .order-search input{ width: calc(100% - 80rpx); background-color: #eaeaea; margin: 20rpx auto 30rpx; height: 80rpx; } .order-nav-bg{ padding: 25rpx 20rpx; background-color: #f5f5f5; position: -webkit-sticky; position: sticky; left: 0; z-index: 99; } .order-nav{ align-items: center; } .order-nav .item{ width: 130rpx; line-height: 80rpx; margin-right: 20rpx; text-align: center; } .order-nav .item:last-child{ margin-right: 0; } .order-nav .item.cur{ background-color: #febf00; color: #000000; } .order-list{ padding: 15rpx 30rpx 20rpx; } .order-item{ padding: 28rpx 0; background-color: #FFFFFF; border-radius: 30rpx; margin-top: 30rpx; box-shadow: 0 7rpx 20rpx rgba(0,0,0,.12); } .order-code{ justify-content: space-between; align-items: center; padding: 0rpx 30rpx 20rpx; font-size: 30rpx; line-height: 1.5; color: #000000; border-bottom: 2rpx solid #eaeaea; } .order-item .item-bg{ padding: 0 15rpx; } .order-item .item{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 30rpx 0; border-bottom: 2rpx solid #eaeaea; } .order-item .item:last-child{ border-bottom: 0; } .order-item .item .img{ width: 194rpx; height: 194rpx; border-radius: 10rpx; overflow: hidden; } .order-item .item .img image{ width: 100%; min-height: 194rpx; } .order-item .item .txt{ width: calc(100% - 230rpx); } .order-item .item .title{ font-size: 30rpx; line-height: 1.5; color: #000000; } .order-item .item .specs{ min-height: 60rpx; font-size: 24rpx; line-height: 1.5; margin: 20rpx 0; color: #8c8c9b; } .order-item .item .price{ justify-content: space-between; align-items: center; font-size: 24rpx; line-height: 1.5; color: #8c8c9b; } .order-item .item .price>text{ font-size: 30rpx; color: #f81c1c; } .order-item .item .price>view{ display: flex; align-items: center; } .order-item .item .price>view text{ margin-right: 4rpx; } .order-item .total-price{ flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 0 30rpx; padding-top: 25rpx; border-top: 2rpx solid #eaeaea; } .order-item .total-price>text{ font-size: 30rpx; color: #f81c1c; } .order-item .total-price .btn{ box-sizing: border-box; width: 150rpx; border: 2rpx solid #d3d3d3; border-radius: 20rpx; font-size: 30rpx; color: #8c8c9b; line-height: 64rpx; text-align: center; } .order-item .total-price .btn:nth-of-type(2){ margin-left: 20rpx; } .order-item .total-price .btn-01{ background-color: #f81c1c; color: #ffffff; border: 0; } .order-item .total-price .btn-02{ color: #000000; border: 0; } /* 取消订单 */ .cancle-reason{ margin-top: 30rpx; } .cancle-reason .item{ align-items: center; height: 74rpx; } .cancle-reason .item>.radio{ -webkit-transform: scale(.8); transform: scale(.8); margin-left: -5rpx; } /* 订单详情 */ .order-info>view{ justify-content: space-between; align-items: center; } /* 付款详情 */ .pay-info>view{ justify-content: space-between; align-items: center; } .pay-info>.pay-actual{ justify-content: flex-end; } .pay-info>.pay-actual>text{ margin-left: 8rpx; } .distributor{ padding: 40rpx 40rpx 170rpx; } .distributor .input{ height: 80rpx; border-bottom: 2rpx solid #e6e6e6; } .distributor-btn{ padding: 20rpx 40rpx; width: 100%; position: fixed; left: 0; bottom: 0; z-index: 99; } .distributor-btn .btn{ justify-content: center; align-items: center; height: 130rpx; } .order-btns-bg{ justify-content: space-between; align-items: center; } .order-btns-bg .btn{ width: calc(50% - 22rpx); height: 84rpx; } /* 项目页面样式 end */ /* 动画样式 start */ @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} .animated.hinge{-webkit-animation-duration:2s;animation-duration:2s} @-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}} @keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}} .bounce{-webkit-animation-name:bounce;animation-name:bounce} @-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} @keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}} .flash{-webkit-animation-name:flash;animation-name:flash} @-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}} .pulse{-webkit-animation-name:pulse;animation-name:pulse} @-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}} @keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}} .rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand} @-webkit-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)}} @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)}} .shake{-webkit-animation-name:shake;animation-name:shake} @-webkit-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(0deg);transform:rotate(0deg)}} @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(0deg);transform:rotate(0deg)}} .swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing} @-webkit-keyframes tada{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)}} @keyframes tada{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)}} .tada{-webkit-animation-name:tada;animation-name:tada} @-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}} @keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}} .wobble{-webkit-animation-name:wobble;animation-name:wobble} @-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} @keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}} .bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn} @-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}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)}} @keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}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)}} .bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown} @-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}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)}} @keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}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)}} .bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft} @-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}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)}} @keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}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)}} .bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight} @-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}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)}} @keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}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)}} .bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp} @-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}} @keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}} .bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut} @-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown} @-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft} @-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight} @-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp} @-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} @keyframes fadeIn{0%{opacity:0}100%{opacity:1}} .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn} @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown} @-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig} @-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft} @-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig} @-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight} @-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}} .fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig} @-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} @-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig} @-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}} @keyframes fadeOut{0%{opacity:1}100%{opacity:0}} .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut} @-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}} @keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}} .fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown} @-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig} @-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}} @keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}} .fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft} @-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig} @-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}} @keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}} .fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight} @-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig} @-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}} @keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}} .fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp} @-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig} @-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-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) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}} @keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-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) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}} .animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip} @-webkit-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(0deg);transform:perspective(400px) rotateX(0deg);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(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}} .flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX} @-webkit-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(0deg);transform:perspective(400px) rotateY(0deg);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(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}} .flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY} @-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}} @keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}} .flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important} @-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}} @keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}} .flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY} @-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}} @keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}} .lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} @-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}} @keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}} .lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in} @-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} @keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}} .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn} @-webkit-keyframes rotateInDownLeft{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}} @keyframes rotateInDownLeft{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}} .rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft} @-webkit-keyframes rotateInDownRight{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}} @keyframes rotateInDownRight{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}} .rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight} @-webkit-keyframes rotateInUpLeft{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}} @keyframes rotateInUpLeft{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}} .rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft} @-webkit-keyframes rotateInUpRight{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}} @keyframes rotateInUpRight{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}} .rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight} @-webkit-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}} @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}} .rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut} @-webkit-keyframes rotateOutDownLeft{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}} @keyframes rotateOutDownLeft{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}} .rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft} @-webkit-keyframes rotateOutDownRight{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}} @keyframes rotateOutDownRight{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}} .rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight} @-webkit-keyframes rotateOutUpLeft{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}} @keyframes rotateOutUpLeft{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}} .rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft} @-webkit-keyframes rotateOutUpRight{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}} @keyframes rotateOutUpRight{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}} .rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight} @-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}} .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown} @-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft} @-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} @keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} .slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight} @-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} @keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}} .slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft} @-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} @keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}} .slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight} @-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} @keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}} .slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp} @-webkit-keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}} .slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp} @-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} @keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}} .slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown} @-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}} @keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}} .hinge{-webkit-animation-name:hinge;animation-name:hinge} @-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}} @keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}} .rollIn{-webkit-animation-name:rollIn;animation-name:rollIn} @-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}} @keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}} .rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}} @keyframes zoomIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1}} .zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn} @-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown} @-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft} @-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(-48px);transform:scale(.475) translateX(-48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight} @-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} @keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}} .zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp} @-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}} @keyframes zoomOut{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}100%{opacity:0}} .zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut} @-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}} @keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale(.475) translateY(-60px);transform:scale(.475) translateY(-60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(2000px);transform:scale(.1) translateY(2000px);-webkit-transform-origin:center bottom;transform-origin:center bottom}} .zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown} @-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}} @keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale(.475) translateX(42px);transform:scale(.475) translateX(42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-transform-origin:left center;transform-origin:left center}} .zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft} @-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}} @keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale(.475) translateX(-42px);transform:scale(.475) translateX(-42px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateX(2000px);transform:scale(.1) translateX(2000px);-webkit-transform-origin:right center;transform-origin:right center}} .zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight} @-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}} @keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:linear;animation-timing-function:linear}100%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-transform-origin:center top;transform-origin:center top}} .zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp} /* 动画样式 end */ .loading-box { display: flex; justify-content: center; width: 100%; padding-top: 20px; font-size: 30px; color: rgba(253, 82, 75, 1); vertical-align: top; transition: .3s color, .3s border; } /* .loading-box:hover { color: #d60b52; font-size: 0; padding: 0; border-width: 3px; line-height: 200px; } .loading-box:hover [class*="loader-"] { font-size: 70px; line-height: 200px; } */ [class*="loader-"] { display: inline-block; width: 1em; height: 1em; color: inherit; vertical-align: middle; pointer-events: none; } .loader-01 { border: .2em dotted currentcolor; border-radius: 50%; -webkit-animation: 1s loader-01 linear infinite; animation: 1s loader-01 linear infinite; } @-webkit-keyframes loader-01 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-01 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-02 { border: .2em solid transparent; border-left-color: currentcolor; border-right-color: currentcolor; border-radius: 50%; -webkit-animation: 1s loader-02 linear infinite; animation: 1s loader-02 linear infinite; } @-webkit-keyframes loader-02 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-02 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-03 { border: .2em solid currentcolor; border-bottom-color: transparent; border-radius: 50%; -webkit-animation: 1s loader-03 linear infinite; animation: 1s loader-03 linear infinite; position: relative; } @-webkit-keyframes loader-03 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-03 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-04 { border: 1px solid currentcolor; border-radius: 50%; -webkit-animation: 1s loader-04 linear infinite; animation: 1s loader-04 linear infinite; position: relative; } .loader-04:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -.2em; left: 50%; border: .2em solid currentcolor; border-radius: 50%; } @-webkit-keyframes loader-04 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-04 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-05 { border: .2em solid transparent; border-top-color: currentcolor; border-radius: 50%; -webkit-animation: 1s loader-05 linear infinite; animation: 1s loader-05 linear infinite; position: relative; } .loader-05:before { content: ''; display: block; width: inherit; height: inherit; position: absolute; top: -.2em; left: -.2em; border: .2em solid currentcolor; border-radius: 50%; opacity: .5; } @-webkit-keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-05 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-06 { border: .2em solid currentcolor; border-radius: 50%; -webkit-animation: loader-06 1s ease-out infinite; animation: loader-06 1s ease-out infinite; } @-webkit-keyframes loader-06 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-06 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-07 { border: 0 solid transparent; border-radius: 50%; position: relative; } .loader-07:before, .loader-07:after { content: ''; border: .2em solid currentcolor; border-radius: 50%; width: inherit; height: inherit; position: absolute; top: 0; left: 0; -webkit-animation: loader-07 1s linear infinite; animation: loader-07 1s linear infinite; opacity: 0; } .loader-07:before { -webkit-animation-delay: 1s; animation-delay: 1s; } .loader-07:after { -webkit-animation-delay: .5s; animation-delay: .5s; } @-webkit-keyframes loader-07 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-07 { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-08 { position: relative; } .loader-08:before, .loader-08:after { content: ''; width: inherit; height: inherit; border-radius: 50%; background-color: currentcolor; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: loader-08 2.0s infinite ease-in-out; animation: loader-08 2.0s infinite ease-in-out; } .loader-08:after { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes loader-08 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loader-08 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .loader-09 { background-color: currentcolor; border-radius: 50%; -webkit-animation: loader-09 1.0s infinite ease-in-out; animation: loader-09 1.0s infinite ease-in-out; } @-webkit-keyframes loader-09 { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } @keyframes loader-09 { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; } } .loader-10 { position: relative; -webkit-animation: loader-10-1 2.0s infinite linear; animation: loader-10-1 2.0s infinite linear; } .loader-10:before, .loader-10:after { content: ''; width: 0; height: 0; border: .5em solid currentcolor; display: block; position: absolute; border-radius: 100%; -webkit-animation: loader-10-2 2s infinite ease-in-out; animation: loader-10-2 2s infinite ease-in-out; } .loader-10:before { top: 0; left: 50%; } .loader-10:after { bottom: 0; right: 50%; -webkit-animation-delay: -1s; animation-delay: -1s; } @-webkit-keyframes loader-10-1 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-10-1 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-10-2 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes loader-10-2 { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } .loader-11 { background-color: currentcolor; -webkit-animation: loader-11 1.2s infinite ease-in-out; animation: loader-11 1.2s infinite ease-in-out; } @-webkit-keyframes loader-11 { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } @keyframes loader-11 { 0% { -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .loader-12 { position: relative; } .loader-12:before, .loader-12:after { content: ''; display: block; position: absolute; background-color: currentcolor; left: 50%; right: 0; top: 0; bottom: 50%; box-shadow: -.5em 0 0 currentcolor; -webkit-animation: loader-12 1s linear infinite; animation: loader-12 1s linear infinite; } .loader-12:after { top: 50%; bottom: 0; -webkit-animation-delay: .25s; animation-delay: .25s; } @-webkit-keyframes loader-12 { 0%, 100% { box-shadow: -.5em 0 0 transparent; background-color: currentcolor; } 50% { box-shadow: -.5em 0 0 currentcolor; background-color: transparent; } } @keyframes loader-12 { 0%, 100% { box-shadow: -.5em 0 0 transparent; background-color: currentcolor; } 50% { box-shadow: -.5em 0 0 currentcolor; background-color: transparent; } } .loader-13:before, .loader-13:after, .loader-13 { border-radius: 50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: loader-13 1.8s infinite ease-in-out; animation: loader-13 1.8s infinite ease-in-out; } .loader-13 { color: currentcolor; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; top: -1em; } .loader-13:before { right: 100%; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .loader-13:after { left: 100%; } .loader-13:before, .loader-13:after { content: ''; display: block; position: absolute; top: 0; width: inherit; height: inherit; } @-webkit-keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -.2em; } } @keyframes loader-13 { 0%, 80%, 100% { box-shadow: 0 1em 0 -1em; } 40% { box-shadow: 0 1em 0 -.2em; } } .loader-14 { border-radius: 50%; box-shadow: 0 1em 0 -.2em currentcolor; position: relative; -webkit-animation: loader-14 0.8s ease-in-out alternate infinite; animation: loader-14 0.8s ease-in-out alternate infinite; -webkit-animation-delay: 0.32s; animation-delay: 0.32s; top: -1em; } .loader-14:after, .loader-14:before { content: ''; position: absolute; width: inherit; height: inherit; border-radius: inherit; box-shadow: inherit; -webkit-animation: inherit; animation: inherit; } .loader-14:before { left: -1em; -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } .loader-14:after { right: -1em; -webkit-animation-delay: 0.16s; animation-delay: 0.16s; } @-webkit-keyframes loader-14 { 0% { box-shadow: 0 2em 0 -.2em currentcolor; } 100% { box-shadow: 0 1em 0 -.2em currentcolor; } } @keyframes loader-14 { 0% { box-shadow: 0 2em 0 -.2em currentcolor; } 100% { box-shadow: 0 1em 0 -.2em currentcolor; } } .loader-15 { background: currentcolor; position: relative; -webkit-animation: loader-15 1s ease-in-out infinite; animation: loader-15 1s ease-in-out infinite; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; width: .25em; height: .5em; } .loader-15:after, .loader-15:before { content: ''; position: absolute; width: inherit; height: inherit; background: inherit; -webkit-animation: inherit; animation: inherit; } .loader-15:before { right: .5em; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .loader-15:after { left: .5em; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } @-webkit-keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor; } 50% { box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor; } } @keyframes loader-15 { 0%, 100% { box-shadow: 0 0 0 currentcolor, 0 0 0 currentcolor; } 50% { box-shadow: 0 -.25em 0 currentcolor, 0 .25em 0 currentcolor; } } .loader-16 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); -webkit-perspective: 1000px; perspective: 1000px; border-radius: 50%; } .loader-16:before, .loader-16:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 50%; -webkit-animation: 1s spin linear infinite; animation: 1s spin linear infinite; } .loader-16:before { -webkit-transform: rotateX(70deg); transform: rotateX(70deg); } .loader-16:after { -webkit-transform: rotateY(70deg); transform: rotateY(70deg); -webkit-animation-delay: .4s; animation-delay: .4s; } @-webkit-keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotateZ(0deg); transform: translate(-50%, -50%) rotateZ(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @keyframes rotate { 0% { -webkit-transform: translate(-50%, -50%) rotateZ(0deg); transform: translate(-50%, -50%) rotateZ(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); } } @-webkit-keyframes rotateccw { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes rotateccw { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); } } @-webkit-keyframes spin { 0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; } 12% { box-shadow: .2em .2em 0 0 currentcolor; } 25% { box-shadow: 0 .2em 0 0px currentcolor; } 37% { box-shadow: -.2em .2em 0 0 currentcolor; } 50% { box-shadow: -.2em 0 0 0 currentcolor; } 62% { box-shadow: -.2em -.2em 0 0 currentcolor; } 75% { box-shadow: 0px -.2em 0 0 currentcolor; } 87% { box-shadow: .2em -.2em 0 0 currentcolor; } } @keyframes spin { 0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; } 12% { box-shadow: .2em .2em 0 0 currentcolor; } 25% { box-shadow: 0 .2em 0 0px currentcolor; } 37% { box-shadow: -.2em .2em 0 0 currentcolor; } 50% { box-shadow: -.2em 0 0 0 currentcolor; } 62% { box-shadow: -.2em -.2em 0 0 currentcolor; } 75% { box-shadow: 0px -.2em 0 0 currentcolor; } 87% { box-shadow: .2em -.2em 0 0 currentcolor; } } .loader-17 { position: relative; background-color: currentcolor; border-radius: 50%; } .loader-17:after, .loader-17:before { content: ""; position: absolute; width: .25em; height: .25em; border-radius: 50%; opacity: .8; } .loader-17:after { left: -.5em; top: -.25em; background-color: currentcolor; -webkit-transform-origin: .75em 1em; transform-origin: .75em 1em; -webkit-animation: loader-17 1s linear infinite; animation: loader-17 1s linear infinite; opacity: .6; } .loader-17:before { left: -1.25em; top: -.75em; background-color: currentcolor; -webkit-transform-origin: 1.5em 1em; transform-origin: 1.5em 1em; -webkit-animation: loader-17 2s linear infinite; animation: loader-17 2s linear infinite; } @-webkit-keyframes loader-17 { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); transform: rotateZ(360deg) translate3d(0, 0, 0); } } @keyframes loader-17 { 0% { -webkit-transform: rotateZ(0deg) translate3d(0, 0, 0); transform: rotateZ(0deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotateZ(360deg) translate3d(0, 0, 0); transform: rotateZ(360deg) translate3d(0, 0, 0); } } .loader-18 { position: relative; } .loader-18:before, .loader-18:after { content: ''; display: block; position: absolute; border-radius: 50%; border: .1em solid transparent; border-bottom-color: currentcolor; top: 0; left: 0; -webkit-animation: 1s loader-18 linear infinite; animation: 1s loader-18 linear infinite; } .loader-18:before { width: 1em; height: 1em; } .loader-18:after { width: .8em; height: .8em; top: .1em; left: .1em; -webkit-animation-direction: reverse; animation-direction: reverse; } @-webkit-keyframes loader-18 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-18 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader-19 { border-top: .2em solid currentcolor; border-right: .2em solid transparent; -webkit-animation: loader-19 1s linear infinite; animation: loader-19 1s linear infinite; border-radius: 100%; position: relative; } @-webkit-keyframes loader-19 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-19 { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }