{"html":"

Advanced CSS Card

\n This card showcases advanced CSS techniques including animations,\n gradients, and interactive elements.\n

\n Design\n CSS\n HTML\n

\n \n \n \n \n 42\n \n \n \n \n \n 18\n \n

\n Explore\n

\n\n","css":".card {\n width: 320px;\n background-color: #ffffff;\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n transition: all 0.3s ease;\n}\n\n.card:hover {\n transform: translateY(-10px) rotateY(5deg);\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);\n}\n\n.card-image {\n height: 160px;\n background: linear-gradient(135deg, #4f46e5, #818cf8);\n position: relative;\n overflow: hidden;\n}\n\n.card-image::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -50%;\n width: 200%;\n height: 100%;\n background: linear-gradient(\n to bottom,\n transparent,\n rgba(255, 255, 255, 0.1) 50%,\n transparent\n );\n transform: rotate(45deg);\n animation: shine 3s infinite;\n}\n\n@keyframes shine {\n 0% {\n transform: translateX(-50%) rotate(45deg);\n }\n 100% {\n transform: translateX(100%) rotate(45deg);\n }\n}\n\n.card-content {\n padding: 24px;\n}\n\n.card-title {\n font-size: 24px;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 16px;\n position: relative;\n padding-bottom: 10px;\n}\n\n.card-title::after {\n content: \"\";\n position: absolute;\n left: 0;\n bottom: 0;\n width: 50px;\n height: 3px;\n background-color: #4f46e5;\n transition: width 0.3s ease;\n}\n\n.card:hover .card-title::after {\n width: 100px;\n}\n\n.card-description {\n font-size: 14px;\n color: #4b5563;\n line-height: 1.6;\n margin-bottom: 20px;\n}\n\n.card-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 20px;\n}\n\n.card-tag {\n font-size: 12px;\n color: #4f46e5;\n background-color: #eef2ff;\n padding: 4px 10px;\n border-radius: 20px;\n transition: all 0.3s ease;\n}\n\n.card-tag:hover {\n background-color: #4f46e5;\n color: #ffffff;\n transform: translateY(-2px);\n}\n\n.card-footer {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 16px;\n border-top: 1px solid #e5e7eb;\n}\n\n.card-stats {\n display: flex;\n gap: 16px;\n}\n\n.card-stat {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 14px;\n color: #6b7280;\n}\n\n.card-stat-icon {\n width: 20px;\n height: 20px;\n fill: currentColor;\n}\n\n.card-button {\n display: inline-block;\n padding: 10px 20px;\n background: linear-gradient(135deg, #4f46e5, #818cf8);\n color: #ffffff;\n text-decoration: none;\n border-radius: 25px;\n font-weight: 600;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.card-button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 135deg,\n transparent,\n rgba(255, 255, 255, 0.3),\n transparent\n );\n transition: all 0.4s ease;\n}\n\n.card-button:hover::before {\n left: 100%;\n}\n\n.card-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 5px 15px rgba(79, 70, 229, 0.4);\n}\n\n@keyframes float {\n 0%,\n 100% {\n transform: translateY(0) rotate(0deg);\n }\n 50% {\n transform: translateY(-10px) rotate(2deg);\n }\n}\n\n.card {\n animation: float 6s ease-in-out infinite;\n}\n"}

dry-wasp-82

👁 实时预览

📝 源代码