{"html":"

NEW

\n \n \n \n \n \n

image

Product name

19,99$

\n","css":".card {\n width: 250px;\n height: 325px;\n background: lightgrey;\n border-radius: 20px;\n box-shadow: -8px 8px 0px 5px rgb(50, 50, 50, 0.2);\n border: solid 2px white;\n overflow: hidden;\n position: relative;\n transition: all 0.5s ease;\n font-family: Verdana, Geneva, Tahoma, sans-serif;\n transform: rotate(3deg) skewX(3deg);\n}\n\n#cardtop {\n width: 100%;\n height: 70%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.1s ease;\n color: #fc6969;\n}\n\n#cardtop p {\n font-size: 20px;\n font-weight: 500;\n padding-left: 2px;\n}\n\n#cardbottom {\n width: 100%;\n height: 31%;\n border-end-start-radius: 20px;\n border-end-end-radius: 20px;\n background-color: white;\n font-weight: 500;\n font-size: 20px;\n padding: 10px;\n color: #fc6969;\n transition: all 0.2s ease;\n}\n\n#cardbottom hr {\n height: 3px;\n background-color: black;\n}\n\n#cardbottomtitle {\n margin-bottom: 10px;\n}\n\n#cardbottomprice {\n display: flex;\n justify-content: end;\n margin-top: 10px;\n border-top: 2px solid lightgrey;\n}\n\n#cardbrightfilter {\n width: 450px;\n height: 200px;\n background-color: rgb(255, 255, 255, 0.5);\n position: absolute;\n transform: rotate(-40deg) translateX(-15%) translateY(-160%);\n transition: all 0.5s ease;\n z-index: 1;\n}\n#cardnewfilter {\n width: 75px;\n height: 30px;\n border-radius: 25px;\n background-color: #fc6969;\n position: absolute;\n z-index: 2;\n display: flex;\n color: white;\n align-items: center;\n justify-content: center;\n border-top-right-radius: 0px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n font-weight: 500;\n}\n\n.card:hover {\n transform: translateY(-5%);\n box-shadow: 0px 20px 10px rgb(50, 50, 50, 0.2);\n}\n.card:hover #cardbrightfilter {\n transform: rotate(-42deg) translateX(-15%) translateY(-79%);\n}\n\n.card:active #cardtop {\n transform: scale(1.05);\n}\n\n.card:active #cardbottom {\n background-color: #fc6969;\n}\n\n.card:active #cardbottom {\n color: white;\n}\n\n.card:active #cardbottom hr {\n background-color: white;\n}\n"}

ordinary-stingray-27

👁 实时预览

📝 源代码