{"html":"

Card Hover Effect\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi\n laboriosam at voluptas minus culpa deserunt delectus sapiente\n inventore pariatur\n

\n \n

","css":".card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 320px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);\n padding: 32px;\n overflow: hidden;\n border-radius: 10px;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 20px;\n color: #e8e8e8;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.content .heading {\n font-weight: 700;\n font-size: 32px;\n}\n\n.content .para {\n line-height: 1.5;\n}\n\n.content .btn {\n color: #e8e8e8;\n text-decoration: none;\n padding: 10px;\n font-weight: 600;\n border: none;\n cursor: pointer;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n border-radius: 5px;\n box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);\n}\n\n.card::before {\n content: \"\";\n position: absolute;\n right: 0;\n bottom: 0;\n width: 5px;\n height: 100%;\n background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );\n z-index: -1;\n transition: all 0.5s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card:hover::before {\n width: 100%;\n}\n\n.card:hover {\n box-shadow: none;\n}\n\n.card:hover .btn {\n color: #212121;\n background: #e8e8e8;\n}\n\n.content .btn:hover {\n outline: 2px solid #e8e8e8;\n background: transparent;\n color: #e8e8e8;\n}\n\n.content .btn:active {\n box-shadow: none;\n}\n"}

proud-mule-57

👁 实时预览

📝 源代码