/* 阿里巴巴矢量图标库 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 */ /* 盒模型 */ .border-box{box-sizing: border-box;} /* 字体 */ .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;} .font50{ font-size: 50rpx;} .font52{ font-size: 52rpx;} .font54{ font-size: 54rpx;} .font56{ font-size: 56rpx;} .font58{ font-size: 58rpx;} .font60{ font-size: 60rpx;} /* 文字颜色 */ .color-white{ color: #ffffff;} .color-blue{ color: #0788ff;} .color-yellow{ color: #ffde00;} .color-00{ color: #000000;} .color-33{ color: #333333;} .color-66{ color: #666666;} .color-88{ color: #888888;} .color-99{ color: #999999;} /* 背景颜色 */ .bg-blue{ background-color: #0788ff;} .bg-yellow{ background-color: #ffde00;} .bg-white{ background-color: #ffffff;} /* 内边距 */ .pad-x120{ padding-bottom: 120rpx;} /* 文字行数 */ .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; } /* 项目基础样式 end */ /* 项目样式 start */ /* 内容区 */ page{ color: #333333; } /* 首页 */ .sign-top{ position: relative; text-align: center; padding-bottom: 80rpx; } .sign-top .sign-type{ width: 100rpx; line-height: 44rpx; border-radius: 22rpx; margin-top: 3rpx; position: absolute; right: 25rpx; z-index: 1; } .sign-top>image{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; } .sign-top .sign-time{ line-height: 50rpx; } .sign-top .sign-time>text:nth-of-type(1){ margin-right: 18rpx; } /* 打卡 */ .sign-top .sign-btn{ width: 240rpx; height: 240rpx; border-radius: 100%; background-image: linear-gradient(to top,#4e4e4e,#cbcbcb); margin: 44rpx auto 12rpx; box-shadow: 0 0 22rpx 8rpx rgba(11,66,101,.25); overflow: hidden; } .sign-top .sign-btn.finish{ background-image: linear-gradient(to top,#eb7607,#ffc600); } .sign-top .sign-btn>text{ line-height: 30rpx; } .sign-top .sign-btn>text:nth-of-type(1){ display: block; font-weight: bold; line-height: 60rpx; margin: 70rpx 0 32rpx; } .sign-top .sign-site{ display: flex; justify-content: space-between; align-items: center; padding: 0 25rpx; height: 48rpx; overflow: hidden; } .sign-top .sign-site .position, .sign-top .sign-site .warning, .sign-top .sign-site .position-btn{ display: flex; align-items: center; height: 100%; } .sign-top .sign-site .warning>image{ width: 23rpx; height: 23rpx; margin-right: 6rpx; } .sign-top .sign-site .position-btn{ justify-content: center; width: 164rpx; border-radius: 24rpx; margin-left: 10rpx; background-color: rgba(56,24,24,.3); border: 1px solid rgba(255,255,255,.3); } .sign-top .sign-site .position-btn>image{ width: 27rpx; height: 27rpx; margin-right: 5rpx; } /* 打卡记录 */ .sign-record{ border-radius: 60rpx 60rpx 0 0; overflow: hidden; margin-top: -60rpx; padding: 10rpx 48rpx; overflow: hidden; } .sign-record .title{ display: flex; align-items: center; height: 64rpx; border-bottom: 3rpx solid #f1f5f9; } .sign-record .title>image{ width: 30rpx; height: 30rpx; margin-right: 8rpx; } .sign-record .item{ display: flex; justify-content: space-between; padding: 28rpx 0; border-bottom: 2rpx solid #f1f5f9; line-height: 1.85; } .sign-record .item:last-child{ border-bottom: 0; } .sign-record .info{ display: flex; flex-direction: column; width: calc(100% - 80rpx); padding-left: 22rpx; position: relative; } .sign-record .info:before{ content: ""; display: block; width: 9rpx; height: 9rpx; background-color: #0788ff; border-radius: 100%; position: absolute; left: 0; top: 20rpx; z-index: 1; } .sign-record .state{ width: 90rpx; text-align: right; } /* 弹窗 */ .pop-up-bg{ display: flex; justify-content: center; align-items: center; box-sizing: border-box; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); position: fixed; left: 0; top: 0; z-index: 999; } /* 安全公告 */ .safety-bulletin{ box-sizing: border-box; width: calc(100% - 90rpx); border-radius: 10rpx; padding: 40rpx 45rpx 66rpx; } .safety-bulletin .title{ font-weight: bold; text-align: center; margin-bottom: 20rpx; } .safety-bulletin .txt{ line-height: 1.75; text-align: justify; } .safety-bulletin .close-btn{ display: flex; justify-content: center; align-items: center; width: 200rpx; height: 68rpx; border: 2rpx solid #dcdcdc; border-radius: 10rpx; margin: 50rpx auto 0; } /* 注册信息 */ .register-information{ box-sizing: border-box; width: calc(100% - 90rpx); border-radius: 10rpx; padding: 40rpx 25rpx 50rpx; } .register-information .item{ display: flex; justify-content: space-between; align-items: center; height: 68rpx; margin-top: 16rpx; } .register-information .item:first-child{ margin-top: 0; } .register-information .item .title{ width: 150rpx; text-align: right; } .register-information .item .input{ box-sizing: border-box; width: calc(100% - 170rpx); height: 68rpx; padding: 0 10rpx; border: 2rpx solid #dcdcdc; border-radius: 5rpx; } .register-information .submit-btn{ width: calc(100% - 170rpx); line-height: 80rpx; border-radius: 10rpx; text-align: center; margin: 26rpx 0 0 170rpx; } .register-information .item .name{ display: flex; justify-content: space-between; align-items: center; height: 64rpx; } .register-information .item .name image{ width: 19rpx; height: 14rpx; margin-right: 5rpx; } /* 加班 */ .overtime-from{ width: 100%; padding-top: 10rpx; border-top: 26rpx solid #ecf5fb; } .overtime-from .item{ width: calc(100% - 60rpx); padding: 20rpx 0 33rpx; margin: 0 auto; border-top: 2rpx solid #f1f5f9; line-height: 2; } .overtime-from .item:first-child{ border-top: 0; } .overtime-from .item .title{ display: flex; align-items: center; font-weight: bold; } .overtime-from .item .title:before{ content: ""; display: inline-block; width: 9rpx; height: 9rpx; border-radius: 100%; background-color: #333333; margin-right: 15rpx; } .overtime-from .item .input{ box-sizing: border-box; width: calc(100% - 25rpx); height: 70rpx; margin: 7rpx 0 0 25rpx; padding: 0 10rpx; border: 2rpx solid #dcdcdc; border-radius: 5rpx; } .overtime-from .item .textarea{ height: 295rpx; padding: 10rpx; line-height: 1.6; } .overtime-from .item .name{ display: flex; justify-content: space-between; align-items: center; height: 66rpx; } .overtime-from .item .name image{ width: 18rpx; height: 10rpx; margin-right: 5rpx; } .overtime-from .item .time-input{ display: flex; justify-content: space-between; align-items: center; } .overtime-from .item .time-input .input{ width: calc(100% - 90rpx); } .overtime-from .submit-btn{ width: calc(100% - 85rpx); background-image: linear-gradient(to right,#028bfd,#02b4fe); border-radius: 5rpx; line-height: 80rpx; margin-left: 55rpx; text-align: center; } /* 个人中心 */ .my-top{ padding-bottom: 45rpx; } .my-info{ display: flex; align-items: center; padding: 25rpx 30rpx; } .my-info .my-cover{ width: 130rpx; height: 130rpx; margin-right: 20rpx; border-radius: 100%; border: 2rpx solid #dcdcdc; overflow: hidden; } .my-info .my-cover image{ width: 130rpx; height: 130rpx; } .my-info .my-txt{ line-height: 1.5; text-align: left; } .my-info .my-txt view:nth-of-type(2){ display: inline-block; padding: 0 30rpx; margin-top: 8rpx; line-height: 46rpx; background-color: #036db3; border: 2rpx solid #b8c7e7; border-radius: 25rpx; letter-spacing: 2rpx; text-indent: 2rpx; text-align: center; } .my-more{ margin-top: -45rpx; border-radius: 20rpx 20rpx 0 0; padding: 0; } .my-more .item{ display: flex; justify-content: space-between; align-items: center; height: 95rpx; padding: 0 30rpx; border-bottom: 15rpx solid #f1f5f9; } .my-more .item:last-child{ border-bottom: 15rpx solid #f1f5f9; } .my-more .item .img{ display: flex; align-items: center; width: 45rpx; height: 95rpx; } .my-more .item .txt{ width: calc(100% - 57rpx); } .my-more .item>image{ width: 12rpx; height: 19rpx; } /* 个人资料 */ .information-from{ border-top: 26rpx solid #ecf5fb; } .information-from .item{ display: flex; justify-content: space-between; align-items: center; width: calc(100% - 60rpx); height: 80rpx; margin: 0 auto; border-bottom: 2rpx solid #f1f5f9; } .information-from .item:first-child{ height: 144rpx; } .information-from .cover{ width: 100rpx; height: 100rpx; border-radius: 100%; overflow: hidden; } .information-from .cover image{ width: 100rpx; height: 100rpx; } .information-from .item>image{ width: 12rpx; height: 19rpx; margin-left: 14rpx; } .information-from .item .title{ width: 150rpx; } .information-from .item .msg{ width: calc(100% - 176rpx); text-align: right; } /* 登录 */ .login-header { display: flex; 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 { display: block; width: 224rpx; height: 224rpx; border-radius: 100%; margin: 0 auto; } .logo-name { margin-top: 20rpx; text-align: center; font-weight: bold; } .login-footer { width: 100%; text-align: center; position: fixed; left: 0; bottom: 120rpx; } .login-btn { width: calc(100% - 100rpx); border-radius: 20rpx; line-height: 90rpx; margin: 0 auto; box-shadow: 0 0 20rpx 4rpx rgba(7,136,255,.3); letter-spacing: 3rpx; text-indent: 3rpx; } .agreement-box{ margin-top: 30rpx; } /* 项目样式 end */ /* 加载中样式 start */ .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); } } /* 加载中样式 end */