{"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","css":"#cursor,\n#box,\n#text {\n cursor: pointer;\n}\n#cursor {\n overflow: visible;\n transform: translate3d(300px, 0, 0) scale(1);\n transform-origin: center center;\n transform-box: fill-box;\n animation: cursor 5s ease infinite alternate;\n}\n@keyframes cursor {\n 0% {\n opacity: 0;\n transform: translate3d(300px, 0, 0) scale(1);\n }\n 30% {\n opacity: 1;\n transform: translate3d(0, 0, 0) scale(1);\n }\n 60% {\n opacity: 1;\n transform: translate3d(-200px, -200px, 0) scale(1);\n }\n\n /* clique */\n 65% {\n opacity: 1;\n transform: translate3d(-200px, -200px, 0) scale(0.95);\n }\n 70% {\n opacity: 1;\n transform: translate3d(-200px, -200px, 0) scale(1);\n }\n\n 100% {\n opacity: 1;\n transform: translate3d(-300px, -50px, 0) scale(1);\n }\n}\n\n#box {\n opacity: 0;\n animation: box 5s ease infinite alternate;\n}\n@keyframes box {\n 0%,\n 60% {\n opacity: 0;\n }\n 65%,\n 100% {\n opacity: 1;\n }\n}\n#text {\n}\n"}

lazy-seahorse-31

👁 实时预览

📝 源代码