{"html":"

\n \n

","css":".card {\n position: relative;\n display: flex;\n width: 200px;\n height: 320px;\n background: #C6C6D0;\n color: #212121;\n box-shadow: inset 0 0 0 4px #212121;\n transition: .6s 0.4s;\n cursor: pointer;\n}\n\n.border {\n position: absolute;\n inset: 0;\n}\n\n.border line {\n stroke-width: 4px;\n stroke: #C6C6D0;\n fill: none;\n transition: .6s ease-in-out;\n}\n\n.border line.top,\n.border line.bottom {\n stroke-dasharray: 200;\n}\n\n.border line.left,\n.border line.right {\n stroke-dasharray: 320;\n}\n\n.logo {\n width: 50%;\n margin: auto;\n fill: #212121;\n transition: .6s;\n opacity: 0.9;\n}\n\n.card:hover {\n background-color: transparent;\n transition-delay: 0s;\n}\n\n.card:hover .border line {\n transition-delay: 0.1s;\n}\n\n.card:hover .border line.top {\n transform: translateX(-400px);\n}\n\n.card:hover .border line.bottom {\n transform: translateX(400px);\n}\n\n.card:hover .border line.left {\n transform: translateY(640px);\n}\n\n.card:hover .border line.right {\n transform: translateY(-640px);\n}\n\n.card:hover .logo {\n transition-delay: 0s;\n transform: scale(1.1);\n fill: #C6C6D0;\n filter: drop-shadow( 0 0 30px #C6C6D080);\n opacity: 0.9;\n}"}

soft-shrimp-30

👁 实时预览

📝 源代码