{"html":"

\n Basketball sport\n \n \n \n

\n \n

\n Golden state warriors\n

\n","css":".card {\n --white: hsl(0, 0%, 83%);\n --black: hsl(240, 15%, 9%);\n --stone-300: hsl(24, 6%, 83%);\n --pink-500: hsl(299, 100%, 83%);\n\n cursor: pointer;\n\n position: relative;\n\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.sub-card {\n display: flex;\n align-items: center;\n\n padding: 0.75rem;\n min-width: 11.5rem;\n height: 2.25rem;\n background-color: var(--stone-300);\n}\n.sub-card.category {\n justify-content: space-between;\n\n border-radius: 0.5rem 0.5rem 0rem 0rem;\n\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n.sub-card.named {\n justify-content: center;\n\n border-radius: 0rem 0rem 0.5rem 0.5rem;\n\n transition: all 0.5s cubic-bezier(1, 0, 0, 1);\n}\n\n.card:hover .sub-card.category {\n transform: translateY(100%);\n}\n.card:hover .sub-card.named {\n transform: translateY(-100%);\n}\n\n.sub-card .text_span {\n font-size: 0.75rem;\n font-weight: 600;\n color: var(--black);\n text-transform: capitalize;\n}\n\n.sub-card .icon_svg {\n width: 1rem;\n fill: var(--black);\n}\n\n.card_container {\n overflow: hidden;\n\n position: relative;\n z-index: 5;\n\n width: 17rem;\n height: 14rem;\n background-color: var(--pink-500);\n\n border-radius: 0.5rem;\n}\n.card_container::before {\n content: \"\";\n\n position: absolute;\n z-index: 10;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 0rem;\n aspect-ratio: 1;\n background-color: hsl(240, 15%, 9%, 0.2);\n\n border-radius: 50%;\n transform-origin: center;\n\n transition: all 1s cubic-bezier(1, 0, 0, 1) 0.2s;\n}\n.card_container::after {\n content: \"See more\";\n\n position: absolute;\n z-index: 10;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n display: flex;\n justify-content: center;\n align-items: center;\n\n padding: 0rem;\n box-sizing: border-box;\n width: 0rem;\n aspect-ratio: 1;\n background-color: hsl(240, 15%, 9%, 0.5);\n\n font-size: 0rem;\n font-weight: bold;\n color: var(--white);\n text-align: center;\n\n border-radius: 50%;\n transform-origin: center;\n\n transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;\n}\n\n.card:hover .card_container::before {\n width: 22.5rem;\n\n transition: all 1s cubic-bezier(1, 0, 0, 1) 0s;\n}\n.card:hover .card_container::after {\n padding: 1rem;\n width: 5rem;\n\n font-size: 0.75rem;\n\n transition: all 0.3s ease-in-out 0.4s;\n}\n\n.card_container .image {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n\n width: 3rem;\n fill: var(--black);\n}\n"}

mighty-tiger-68

👁 实时预览

📝 源代码