{"html":"

\n \n \n \n

\n Hi, I'm Name\n

\n Passionate about creating, beautiful and functional websites\n

\n","css":".card_container {\n --X: 0deg;\n --Y: 0deg;\n --Z: 0deg;\n --angleX: 15deg;\n --angleY: 20deg;\n\n cursor: pointer;\n\n position: relative;\n}\n\n.card_hover {\n position: absolute;\n z-index: 10;\n top: 0;\n left: 0;\n\n display: flex;\n flex-wrap: wrap;\n\n width: 100%;\n height: 100%;\n}\n\n.card_hover .part {\n width: 20%;\n height: calc(100% / 3);\n background-color: transparent;\n}\n\n.card_container:has(.part-1:hover) {\n --X: var(--angleX);\n --Y: calc(var(--angleY) * -1);\n}\n.card_container:has(.part-2:hover) {\n --X: var(--angleX);\n --Y: calc((var(--angleY) / 2) * -1);\n}\n.card_container:has(.part-3:hover) {\n --X: var(--angleX);\n}\n.card_container:has(.part-4:hover) {\n --X: var(--angleX);\n --Y: calc(var(--angleY) / 2);\n}\n.card_container:has(.part-5:hover) {\n --X: var(--angleX);\n --Y: var(--angleY);\n}\n.card_container:has(.part-6:hover) {\n --Y: calc(var(--angleY) * -1);\n}\n.card_container:has(.part-7:hover) {\n --Y: calc((var(--angleY) / 2) * -1);\n}\n.card_container:has(.part-9:hover) {\n --Y: calc(var(--angleY) / 2);\n}\n.card_container:has(.part-10:hover) {\n --Y: var(--angleY);\n}\n.card_container:has(.part-11:hover) {\n --X: calc(var(--angleX) * -1);\n --Y: calc(var(--angleY) * -1);\n}\n.card_container:has(.part-12:hover) {\n --X: calc(var(--angleX) * -1);\n --Y: calc((var(--angleY) / 2) * -1);\n}\n.card_container:has(.part-13:hover) {\n --X: calc(var(--angleX) * -1);\n}\n.card_container:has(.part-14:hover) {\n --X: calc(var(--angleX) * -1);\n --Y: calc(var(--angleY) / 2);\n}\n.card_container:has(.part-15:hover) {\n --X: calc(var(--angleX) * -1);\n --Y: var(--angleY);\n}\n\n.card {\n --light: #d9d9d9;\n --dark: #1f1f1f;\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n\n padding: 1.5rem;\n width: 15rem;\n background-color: rgb(172, 250, 233);\n background-image: linear-gradient(\n 135deg,\n rgba(172, 250, 233, 1) 0%,\n rgba(213, 143, 235, 1) 50%,\n rgba(242, 126, 241, 1) 100%\n );\n\n border-radius: 0.5rem;\n\n transform-origin: center;\n transform: rotateX(var(--X)) rotateY(var(--Y)) rotateZ(var(--Z));\n transition: transform 0.3s ease-in-out;\n}\n\n.say-hi {\n position: relative;\n\n width: 100%;\n height: 2rem;\n background-color: transparent;\n}\n\n.icon_say-hi {\n position: absolute;\n bottom: 0;\n left: -0.5rem;\n\n width: 3rem;\n\n opacity: 0;\n transform-origin: 60% 90%;\n transform: translate(-15deg);\n filter: drop-shadow(0 0 0.5rem #2b2b2b);\n transition: all 0.2s ease-in-out;\n}\n\n.card_container:hover .card .icon_say-hi {\n width: 3.5rem;\n\n opacity: 1;\n animation: say-hi 0.35s linear infinite alternate;\n}\n\n@keyframes say-hi {\n to {\n transform: rotate(25deg);\n }\n}\n\n.title {\n overflow: clip;\n\n width: 100%;\n\n font-size: 1rem;\n font-weight: 600;\n color: var(--dark);\n text-transform: capitalize;\n text-wrap: nowrap;\n text-overflow: ellipsis;\n}\n\n.paragraph {\n font-size: 0.5rem;\n font-weight: 600;\n color: var(--dark);\n}\n"}

hot-liger-0

👁 实时预览

📝 源代码