{"html":"

\n \n \n

\n\n\n

\n \n \n

\n\n\n

\n \n \n

","css":".container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.container div {\n position: absolute;\n width: 90px;\n height: 51px;\n}\n\n.container div:nth-of-type(2) {\n transform: rotate(60deg)\n}\n\n.container div:nth-of-type(3) {\n transform: rotate(-60deg)\n}\n\n.container div div {\n width: 100%;\n height: 100%;\n position: relative\n}\n\n.container div div span {\n position: absolute;\n width: 4px;\n height: 0%;\n background: #053146;\n z-index: 999999;\n}\n\n.h1 {\n left: 0;\n animation: load1 7.2s ease infinite;\n}\n\n.h2 {\n right: 0;\n animation: load2 7.2s ease .6s infinite;\n}\n\n.h3 {\n right: 0;\n animation: load3 7.2s ease 1.2s infinite;\n}\n\n.h4 {\n right: 0;\n animation: load4 7.2s ease 1.8s infinite;\n}\n\n.h5 {\n left: 0;\n animation: load5 7.2s ease 2.4s infinite;\n}\n\n.h6 {\n left: 0;\n animation: load6 7.2s ease 3s infinite;\n}\n\n@keyframes load1 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.944444433% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load2 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.944444433% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%} */\n}\n\n@keyframes load3 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load4 {\n 0% {\n top: 0;\n height: 0\n }\n\n 6.944444444% {\n top: 0;\n height: 100%\n }\n\n 50% {\n bottom: 0;\n height: 100%\n }\n\n 59.94444443% {\n bottom: 0;\n height: 0\n }\n/* 91.6666667%{bottom:0;height:0%;} */\n}\n\n@keyframes load5 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.94444443% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n\n@keyframes load6 {\n 0% {\n bottom: 0;\n height: 0\n }\n\n 6.944444444% {\n bottom: 0;\n height: 100%\n }\n\n 50% {\n top: 0;\n height: 100%\n }\n\n 59.94444443% {\n top: 0;\n height: 0\n }\n/* 91.6666667%{top:0;height:0%;} */\n}\n \n"}

stale-pug-89

👁 实时预览

📝 源代码