{"html":"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n","css":"#svg-global {\n zoom: 1.2;\n overflow: visible;\n}\n\n@keyframes fade-particles {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n@keyframes floatUp {\n 0% {\n transform: translateY(0);\n opacity: 0;\n }\n 10% {\n opacity: 1;\n }\n 100% {\n transform: translateY(-40px);\n opacity: 0;\n }\n}\n\n#particles {\n animation: fade-particles 5s infinite alternate;\n}\n.particle {\n animation: floatUp linear infinite;\n}\n\n.p1 {\n animation-duration: 2.2s;\n animation-delay: 0s;\n}\n.p2 {\n animation-duration: 2.5s;\n animation-delay: 0.3s;\n}\n.p3 {\n animation-duration: 2s;\n animation-delay: 0.6s;\n}\n.p4 {\n animation-duration: 2.8s;\n animation-delay: 0.2s;\n}\n.p5 {\n animation-duration: 2.3s;\n animation-delay: 0.4s;\n}\n.p6 {\n animation-duration: 3s;\n animation-delay: 0.1s;\n}\n.p7 {\n animation-duration: 2.1s;\n animation-delay: 0.5s;\n}\n.p8 {\n animation-duration: 2.6s;\n animation-delay: 0.2s;\n}\n.p9 {\n animation-duration: 2.4s;\n animation-delay: 0.3s;\n}\n\n@keyframes bounce-lines {\n 0%,\n 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-3px);\n }\n}\n\n#line-v1,\n#line-v2,\n#node-server,\n#panel-rigth,\n#reflectores,\n#particles {\n animation: bounce-lines 3s ease-in-out infinite alternate;\n}\n#line-v2 {\n animation-delay: 0.2s;\n}\n\n#node-server,\n#panel-rigth,\n#reflectores,\n#particles {\n animation-delay: 0.4s;\n}\n"}

fresh-yak-92

👁 实时预览

📝 源代码