/* assets/transition.css — 站点统一页面转场遮罩（加载动画）用法：在页面引入本文件，内放置

...

结构（见 transition.js / index.html），再引入 transition.js 即可通过 window.PageTransition.show(cb) 触发。 */ #ts-loader-wrapper { position: fixed; inset: 0; z-index: 99999; overflow: hidden; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(45deg, rgb(90, 54, 148) 0%, rgb(19, 189, 206) 33%, rgb(0, 148, 217) 66%, rgb(111, 199, 181) 100%); background-size: 400%; background-position: 0% 100%; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } #ts-loader-wrapper.ts-active { opacity: 1; visibility: visible; -webkit-animation: ts-gradient 7.5s ease-in-out infinite; animation: ts-gradient 7.5s ease-in-out infinite; } #ts-loader { display: flex; position: relative; width: 150px; height: 150px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; -webkit-animation: ts-spin 1.7s linear infinite; animation: ts-spin 1.7s linear infinite; } #ts-loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; -webkit-animation: ts-spin-reverse 0.6s linear infinite; animation: ts-spin-reverse 0.6s linear infinite; } #ts-loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fff; -webkit-animation: ts-spin 1s linear infinite; animation: ts-spin 1s linear infinite; } #ts-loader img { margin: auto; width: 72px; height: 72px; -webkit-animation: ts-img 1.7s linear infinite; animation: ts-img 1.7s linear infinite; transition: opacity 0.25s ease; } #ts-loader img.ts-icon-loading { opacity: 0; } .ts-loader { position: absolute; top: 78%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; width: 100%; max-width: 990px; z-index: 1; } .ts-loader, .ts-loader div { position: absolute; height: 36px; } .ts-loader div { width: 30px; margin: 0 20px; opacity: 0; -webkit-animation: ts-move 2s linear infinite; animation: ts-move 2s linear infinite; transform: rotate(180deg); -webkit-transform: rotate(180deg); color: #fff; font-size: 2em; } .ts-loader div:nth-child(8):before { background: #ffffff; } .ts-loader div:nth-child(8):before, .ts-loader div:nth-child(9):before { content: ""; position: absolute; bottom: 0; left: 0; width: 10px; height: 10px; border-radius: 100%; } .ts-loader div:nth-child(9):before { background: #f2f2f2; } .ts-loader div:nth-child(10):before { bottom: -15px; height: 10px; background: #ffffff; } .ts-loader div:after, .ts-loader div:nth-child(10):before { content: ""; position: absolute; left: 0; width: 10px; border-radius: 100%; } .ts-loader div:after { bottom: -40px; height: 5px; background: rgba(255, 255, 255, 0.1); } .ts-loader div:nth-child(2) { animation-delay: 0.2s; } .ts-loader div:nth-child(3) { animation-delay: 0.4s; } .ts-loader div:nth-child(4) { animation-delay: 0.6s; } .ts-loader div:nth-child(5) { animation-delay: 0.8s; } .ts-loader div:nth-child(6) { animation-delay: 1s; } .ts-loader div:nth-child(7) { animation-delay: 1.2s; } .ts-loader div:nth-child(8) { animation-delay: 1.4s; } .ts-loader div:nth-child(9) { animation-delay: 1.6s; } .ts-loader div:nth-child(10) { animation-delay: 1.8s; } @keyframes ts-gradient { 50% { background-position: 100% 0; } } @-webkit-keyframes ts-gradient { 50% { background-position: 100% 0; } } @keyframes ts-img { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes ts-img { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes ts-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes ts-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes ts-spin-reverse { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes ts-spin-reverse { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); } } @keyframes ts-move { 0% { right: 0; opacity: 0; } 35% { right: 41%; } 35%, 65% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 65% { right: 59%; } to { right: 100%; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); opacity: 0; } } @-webkit-keyframes ts-move { 0%, to { opacity: 0; } 0% { right: 0; } 35% { right: 41%; } 35%, 75% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 75% { right: 59%; } to { right: 100%; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); opacity: 0; } } /* 用户偏好减少动效时立即完成转场，不做动画 */ @media (prefers-reduced-motion: reduce) { #ts-loader-wrapper, #ts-loader, #ts-loader:before, #ts-loader:after, #ts-loader img, .ts-loader div { -webkit-animation: none !important; animation: none !important; } }