{"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","css":".loader {\n --fill-color: #5c3d99;\n --shine-color: #5c3d9933;\n transform: scale(0.5); /* You can change the size */\n width: 100px;\n height: auto;\n position: relative;\n filter: drop-shadow(0 0 10px var(--shine-color));\n}\n\n.loader #pegtopone {\n position: absolute;\n animation: flowe-one 1s linear infinite;\n}\n\n.loader #pegtoptwo {\n position: absolute;\n opacity: 0;\n transform: scale(0) translateY(-200px) translateX(-100px);\n animation: flowe-two 1s linear infinite;\n animation-delay: 0.3s;\n}\n\n.loader #pegtopthree {\n position: absolute;\n opacity: 0;\n transform: scale(0) translateY(-200px) translateX(100px);\n animation: flowe-three 1s linear infinite;\n animation-delay: 0.6s;\n}\n\n.loader svg g path:first-child {\n fill: var(--fill-color);\n}\n\n@keyframes flowe-one {\n 0% {\n transform: scale(0.5) translateY(-200px);\n opacity: 0;\n }\n 25% {\n transform: scale(0.75) translateY(-100px);\n opacity: 1;\n }\n 50% {\n transform: scale(1) translateY(0px);\n opacity: 1;\n }\n 75% {\n transform: scale(0.5) translateY(50px);\n opacity: 1;\n }\n 100% {\n transform: scale(0) translateY(100px);\n opacity: 0;\n }\n}\n\n@keyframes flowe-two {\n 0% {\n transform: scale(0.5) rotateZ(-10deg) translateY(-200px) translateX(-100px);\n opacity: 0;\n }\n 25% {\n transform: scale(1) rotateZ(-5deg) translateY(-100px) translateX(-50px);\n opacity: 1;\n }\n 50% {\n transform: scale(1) rotateZ(0deg) translateY(0px) translateX(-25px);\n opacity: 1;\n }\n 75% {\n transform: scale(0.5) rotateZ(5deg) translateY(50px) translateX(0px);\n opacity: 1;\n }\n 100% {\n transform: scale(0) rotateZ(10deg) translateY(100px) translateX(25px);\n opacity: 0;\n }\n}\n\n@keyframes flowe-three {\n 0% {\n transform: scale(0.5) rotateZ(10deg) translateY(-200px) translateX(100px);\n opacity: 0;\n }\n 25% {\n transform: scale(1) rotateZ(5deg) translateY(-100px) translateX(50px);\n opacity: 1;\n }\n 50% {\n transform: scale(1) rotateZ(0deg) translateY(0px) translateX(25px);\n opacity: 1;\n }\n 75% {\n transform: scale(0.5) rotateZ(-5deg) translateY(50px) translateX(0px);\n opacity: 1;\n }\n 100% {\n transform: scale(0) rotateZ(-10deg) translateY(100px) translateX(-25px);\n opacity: 0;\n }\n}\n"}

fast-vampirebat-53

👁 实时预览

📝 源代码