{"html":"

\n \n\n\n

","css":".card {\n width: 190px;\n height: 254px;\n background: black;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n position: relative;\n transition: 0.2s;\n}\n\n.card:hover {\n transform: scale(1.05);\n transition: 0.2s;\n filter: drop-shadow(0px 0px 10px rgb(0, 247, 255));\n}\n\n.card::after {\n content: \"scanning\";\n height: fit-content;\n width: 100%;\n color: lightskyblue;\n position: absolute;\n z-index: 2;\n bottom: 15%;\n text-align: center;\n animation: 2s dots infinite;\n}\n\n.card::before {\n content: \"\";\n height: 0.1em;\n width: 80%;\n border-radius: 10px;\n background-color: rgb(00, 200, 255);\n position: absolute;\n z-index: 2;\n bottom: 10%;\n animation: 4s grow infinite;\n align-self: flex-start;\n margin-left: 10%;\n filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 10px #3fefef);\n}\n\n.card svg {\n filter: drop-shadow(0px 0px 10px #3fefef) drop-shadow(0px 0px 50px #3fefef);\n}\n\npath {\n stroke-dasharray: 90;\n animation: loop 4s infinite;\n}\n\n@keyframes loop {\n 0% {\n stroke-dashoffset: 50;\n stroke-dasharray: 90;\n }\n\n 50% {\n stroke-dashoffset: 100;\n ;\n stroke-dasharray: 50;\n }\n\n 100% {\n stroke-dashoffset: 50;\n stroke-dasharray: 90;\n }\n}\n\n@keyframes dots {\n 0% {\n content: \"scanning.\"\n }\n\n 25% {\n content: \"scanning..\"\n }\n\n 50% {\n content: \"scanning...\"\n }\n\n 75% {\n content: \"scanning\"\n }\n\n 100% {\n content: \"scanning.\"\n }\n}\n\n@keyframes grow {\n 0% {\n width: 0%;\n }\n\n 50% {\n width: 80%\n }\n\n 100% {\n width: 0%;\n }\n}"}

lazy-jellyfish-5

👁 实时预览

📝 源代码