{"html":"

\n","css":".loader {\n width: 12em;\n height: 3em;\n color: white;\n font-weight: 300;\n font-style: oblique;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.loader p {\n font-size: 1.5em;\n}\n\n.arrows {\n width: 1.75em;\n height: 2em;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 0.5em;\n}\n\n.arrow1,\n.arrow2,\n.arrow3,\n.arrow4 {\n width: 0.75em;\n height: 0.75em;\n border: solid 0.05em transparent;\n}\n.arrowsup {\n width: 100%;\n height: 25%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.arrowsbottom {\n width: 100%;\n height: 25%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.arrow1 {\n clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%);\n animation: whitechange 2s linear infinite;\n}\n.arrow2 {\n clip-path: polygon(0% 0%, 0% 0%, 100% 100%, 0% 100%);\n animation: whitechange 2s linear infinite 0.5s;\n}\n.arrow3 {\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 0%);\n animation: whitechange 2s linear infinite 1.5s;\n}\n.arrow4 {\n clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);\n animation: whitechange 2s linear infinite 1s;\n}\n\n.loader p:nth-child(1) {\n animation: changefont 2s linear infinite;\n}\n.loader p:nth-child(2) {\n animation: changefont 2s linear infinite 0.1s;\n}\n.loader p:nth-child(3) {\n animation: changefont 2s linear infinite 0.2s;\n}\n.loader p:nth-child(4) {\n animation: changefont 2s linear infinite 0.3s;\n}\n.loader p:nth-child(5) {\n animation: changefont 2s linear infinite 0.4s;\n}\n.loader p:nth-child(6) {\n animation: changefont 2s linear infinite 0.5s;\n}\n.loader p:nth-child(7) {\n animation: changefont 2s linear infinite 0.6s;\n}\n\n@keyframes whitechange {\n 0% {\n background-color: transparent;\n box-shadow: none;\n }\n 25% {\n background-color: white;\n }\n 50% {\n background-color: transparent;\n box-shadow: none;\n }\n 100% {\n background-color: transparent;\n box-shadow: none;\n }\n}\n\n@keyframes changefont {\n 0% {\n padding-bottom: 0em;\n }\n 50% {\n padding-bottom: 0em;\n }\n 75% {\n padding-bottom: 1em;\n }\n 100% {\n color: #171030;\n padding-bottom: 0em;\n }\n}\n"}

rotten-turtle-23

👁 实时预览

📝 源代码