{"html":"","css":".cartBtn {\n width: 155px;\n height: 50px;\n border: none;\n border-radius: 0px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n color: white;\n font-weight: 500;\n position: relative;\n background-color: rgb(29, 29, 29);\n box-shadow: 0 20px 30px -7px rgba(27, 27, 27, 0.219);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n overflow: hidden;\n}\n\n.cart {\n z-index: 2;\n}\n\n.cartBtn:active {\n transform: scale(0.96);\n}\n\n.product {\n position: absolute;\n width: 12px;\n border-radius: 3px;\n content: \"\";\n left: 23px;\n bottom: 23px;\n opacity: 0;\n z-index: 1;\n fill: rgb(211, 211, 211);\n}\n\n.cartBtn:hover .product {\n animation: slide-in-top 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-30px);\n opacity: 1;\n }\n\n 100% {\n transform: translateY(0) rotate(-90deg);\n opacity: 1;\n }\n}\n\n.cartBtn:hover .cart {\n animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;\n}\n\n@keyframes slide-in-left {\n 0% {\n transform: translateX(-10px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n}"}

rare-stingray-41

👁 实时预览

📝 源代码