{"html":"

GeForce RTX 4090

RTX

size :

\n S\n M\n L\n

color :

\n pink\n blue\n green\n

\n \n

\n","css":".product-container {\n position: relative;\n}\n\n.card {\n font-family: Lato, sans-serif;\n position: relative;\n width: 290px;\n height: 400px;\n background: #232323;\n border-radius: 20px;\n overflow: hidden;\n}\n\n.card:before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--product-color);\n clip-path: circle(150px at 80% 20%);\n transition: .5s ease-in-out;\n}\n\n.card:hover:before {\n clip-path: circle(300px at 80% -20%);\n}\n\n.title {\n position: relative;\n font-weight: 600;\n letter-spacing: 1px;\n color: #fff;\n margin-top: 12px;\n}\n\n.bg-title {\n font-size: 10em;\n font-weight: 900;\n font-style: italic;\n color: rgba(255,255,255,.04);\n position: absolute;\n max-width: 120%;\n top: -150%;\n transition: .6s;\n}\n\n.card:hover .bg-title {\n transform: translateY(60%);\n}\n\n.photo {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 100%;\n height: 220px;\n transition: .5s;\n}\n\n.card:hover .photo {\n top: 0%;\n transform: translateY(0%);\n}\n\n.photo img {\n position: absolute;\n width: 220px;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(-25deg);\n transition: .5s;\n}\n\n.card:hover .photo img {\n width: 260px;\n top: 56%;\n}\n\n.content {\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 100px;\n text-align: center;\n transition: 1s;\n z-index: 5;\n}\n\n.card:hover .content {\n height: 190px;\n}\n\n.feature {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px 20px;\n transition: .5s;\n visibility: hidden;\n opacity: 0;\n}\n\n.card:hover .feature {\n visibility: visible;\n opacity: 1;\n transition-delay: .5s;\n}\n\n.feature div {\n color: #fff;\n font-weight: 300;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-right: 10px;\n}\n\n.feature span {\n min-width: 20px;\n padding: 0 4px;\n height: 26px;\n text-align: center;\n line-height: 26px;\n font-size: 14px;\n display: inline-block;\n color: #111;\n background: #fff;\n margin: 0 5px;\n transition: .4s;\n border-radius: 4px;\n cursor: pointer\n}\n\n.feature span:hover {\n color: #000;\n background: var(--product-color);\n}\n\n.btn-buy {\n display: inline-block;\n padding: 10px 20px;\n background: #fff;\n border: none;\n border-radius: 4px;\n margin-top: 10px;\n text-decoration: none;\n font-weight: 600;\n color: #111;\n opacity: 0;\n transform: translateY(50px);\n transition: 0.5s;\n cursor: pointer;\n outline: none;\n}\n\n.card:hover .btn-buy {\n opacity: 1;\n transform: translateY(0px);\n transition: 0.5s;\n transition-delay: 0.5s;\n}\n\n.card:hover .btn-buy:hover {\n background: var(--product-color);\n transition-delay: 0;\n transition: 0.05s;\n}\n\n.product-1 {\n --product-color: #EB6CA4;\n}\n\n.size span {\n cursor: pointer;\n z-index: 50;\n}\n\n.feature .tt:hover {\n background: #038dff;\n}\n\n.feature .ttt:hover {\n background: #09ff0d;\n}"}

strange-jellyfish-63

👁 实时预览

📝 源代码