{"html":"

\n \n

\n Shoes Force\n

$100

","css":".card {\n position: relative;\n background: #fff;\n width: 190px;\n height: 265px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 120ms;\n overflow: hidden;\n box-shadow: 0px 1px 13px rgba(0,0,0,0.1);\n}\n\n.card:active {\n transform: scale(.95);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5);\n z-index: 1;\n}\n\n.card::after {\n content: \"Add to Cart\";\n position: absolute;\n bottom: -50%;\n left: 0;\n padding-left: 15px;\n background: #181818;\n width: 100%;\n height: 60px;\n color: #fff;\n line-height: 50px;\n text-transform: uppercase;\n z-index: 2;\n transition: all .2s ease-in;\n}\n\n.card:hover::after {\n bottom: 0;\n}\n\n.card:active::after {\n content: \"Adding !\";\n height: 65px;\n}\n\n.image {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100px;\n height: auto;\n filter: drop-shadow(3px 3px 5px #18181815);\n transform: translate(-50%, -50%);\n animation: shoes 1s ease infinite alternate;\n transition: all .5s ease-in;\n}\n\n@keyframes shoes {\n from {\n top: 48%;\n }\n\n to {\n top: 52%;\n }\n}\n\n.card:hover .image {\n /* top: 20%;\n left: 30%; */\n width: 220px;\n height: auto;\n animation: none;\n transform: rotate(15deg) translate(-35%, -25%);\n}\n\n.text {\n position: absolute;\n top: 15%;\n left: -80%;\n color: #181818;\n transition: all .3s ease-in;\n}\n\n.text span {\n font-size: 25px;\n font-weight: 400;\n margin-bottom: 5px;\n}\n\n.text p {\n font-size: 18px;\n font-weight: bold;\n}\n\n.card:hover .text {\n top: 15%;\n left: 5%;\n}\n\n.fil-shoes2 {\n fill: #a59573\n}"}

smooth-impala-44

👁 实时预览

📝 源代码