{"html":"

","css":".triangles {\n transform: translate(-50%, -50%);\n height: 81px;\n width: 90px;\n position: absolute;\n left: 50%;\n top: 50%;\n}\n\n.tri {\n position: absolute;\n animation: pulse_51 750ms ease-in infinite;\n border-top: 27px solid #215A6D;\n border-left: 15px solid transparent;\n border-right: 15px solid transparent;\n border-bottom: 0px;\n}\n\n.tri.invert {\n border-top: 0px;\n border-bottom: 27px solid #215A6D;\n border-left: 15px solid transparent;\n border-right: 15px solid transparent;\n}\n\n.tri:nth-child(1) {\n left: 30px;\n}\n\n.tri:nth-child(2) {\n left: 15px;\n top: 27px;\n animation-delay: -125ms;\n}\n\n.tri:nth-child(3) {\n left: 30px;\n top: 27px;\n}\n\n.tri:nth-child(4) {\n left: 45px;\n top: 27px;\n animation-delay: -625ms;\n}\n\n.tri:nth-child(5) {\n top: 54px;\n animation-delay: -250ms;\n}\n\n.tri:nth-child(6) {\n top: 54px;\n left: 15px;\n animation-delay: -250ms;\n}\n\n.tri:nth-child(7) {\n top: 54px;\n left: 30px;\n animation-delay: -375ms;\n}\n\n.tri:nth-child(8) {\n top: 54px;\n left: 45px;\n animation-delay: -500ms;\n}\n\n.tri:nth-child(9) {\n top: 54px;\n left: 60px;\n animation-delay: -500ms;\n}\n\n@keyframes pulse_51 {\n 0% {\n opacity: 1;\n }\n\n 16.666% {\n opacity: 1;\n }\n\n 100% {\n opacity: 0;\n }\n}"}

odd-rat-61

👁 实时预览

📝 源代码