{"html":"

👋 Hi!!

hover ☝️

\n","css":".warp {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n.hover-tip {\n text-align: center;\n font-weight: bold;\n}\n\n.card {\n --ballSize: 80px;\n --gap: 16px;\n --duration: 4s;\n width: 200px;\n height: 300px;\n gap: var(--gap);\n filter: contrast(20);\n background-color: #222;\n position: relative;\n overflow: hidden;\n border: 1px solid #333;\n border-radius: 8px;\n}\n.content {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n opacity: 0;\n transition: all 0.3s 0.3s;\n}\n.mask-wrap {\n --color: #fff;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n transform: scale(1.1);\n display: flex;\n pointer-events: none;\n .mask {\n width: 100%;\n height: 100%;\n background: var(--color);\n filter: blur(18px);\n transition: all 0.5s 0.3s;\n }\n}\n.loading-wrap {\n --color: #000;\n width: 60px;\n height: 60px;\n margin: -30px 0 0 -30px;\n position: absolute;\n inset: 50%;\n pointer-events: none;\n transition: all 0.3s 0.3s;\n}\n.ball {\n filter: blur(4px);\n &.ball1 {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 6px solid var(--color);\n animation: animBall1 3s steps(4) infinite;\n }\n &.ball2 {\n width: 12px;\n height: 12px;\n margin: -6px 0 0 -6px;\n position: absolute;\n inset: 50%;\n border-radius: 50%;\n border: 6px solid var(--color);\n animation: animBall2 3s ease-in-out infinite;\n }\n}\n@keyframes animBall1 {\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes animBall2 {\n 50% {\n transform: translateY(18px);\n }\n}\n\n.card:hover {\n .content {\n opacity: 1;\n }\n .mask-left {\n transform: translateX(-100%);\n }\n .mask-right {\n transform: translateX(100%);\n }\n .loading-wrap {\n opacity: 0;\n }\n}\n"}

mean-snail-60

👁 实时预览

📝 源代码