{"html":"

\n","css":".stage {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.strip {\n display: flex;\n}\n.tip {\n width: 0;\n height: 0;\n margin: 0 -6px;\n border-left: 12px solid transparent;\n border-right: 12px solid transparent;\n border-bottom: 22px solid #48fd00;\n filter: drop-shadow(0 0 18px #65fc0d);\n animation: pulse 1s infinite;\n}\n.tip.reverse {\n transform: rotate(180deg);\n}\n.delay-01 {\n animation-delay: -0.05s;\n}\n.delay-02 {\n animation-delay: -0.1s;\n}\n.delay-03 {\n animation-delay: -0.15s;\n}\n.delay-04 {\n animation-delay: -0.2s;\n}\n.delay-05 {\n animation-delay: -0.25s;\n}\n.delay-06 {\n animation-delay: -0.3s;\n}\n.delay-07 {\n animation-delay: -0.35s;\n}\n.delay-08 {\n animation-delay: -0.4s;\n}\n.delay-09 {\n animation-delay: -0.45s;\n}\n.delay-10 {\n animation-delay: -0.5s;\n}\n.delay-11 {\n animation-delay: -0.55s;\n}\n.delay-12 {\n animation-delay: -0.6s;\n}\n.delay-13 {\n animation-delay: -0.65s;\n}\n.delay-14 {\n animation-delay: -0.7s;\n}\n.delay-15 {\n animation-delay: -0.75s;\n}\n.delay-16 {\n animation-delay: -0.8s;\n}\n.delay-17 {\n animation-delay: -0.85s;\n}\n.delay-18 {\n animation-delay: -0.9s;\n}\n.delay-19 {\n animation-delay: -0.95s;\n}\n.delay-20 {\n animation-delay: -1s;\n}\n\n.delay-a {\n animation-delay: -0.17s;\n}\n.delay-b {\n animation-delay: -0.33s;\n}\n.delay-c {\n animation-delay: -0.5s;\n}\n.delay-d {\n animation-delay: -0.67s;\n}\n.delay-e {\n animation-delay: -0.83s;\n}\n.delay-f {\n animation-delay: -1s;\n}\n\n@keyframes pulse {\n 0% {\n opacity: 0.1;\n }\n 30% {\n opacity: 1;\n }\n 100% {\n opacity: 0.1;\n }\n}\n"}

kind-grasshopper-43

👁 实时预览

📝 源代码