{"html":"

\n \n Hover Me\n

\n \n

\n\n

\n Pasta\n

\n Spaguetti Bolognese\n

\n \n

\n 30 Mins | 1 Serving\n

","css":".card {\n overflow: visible;\n width: 190px;\n height: 254px;\n}\n\n.content {\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transition: transform 300ms;\n box-shadow: 0px 0px 10px 1px #000000ee;\n border-radius: 5px;\n}\n\n.front, .back {\n background-color: #151515;\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.back {\n width: 100%;\n height: 100%;\n justify-content: center;\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n\n.back::before {\n position: absolute;\n content: ' ';\n display: block;\n width: 160px;\n height: 160%;\n background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);\n animation: rotation_481 5000ms infinite linear;\n}\n\n.back-content {\n position: absolute;\n width: 99%;\n height: 99%;\n background-color: #151515;\n border-radius: 5px;\n color: white;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 30px;\n}\n\n.card:hover .content {\n transform: rotateY(180deg);\n}\n\n@keyframes rotation_481 {\n 0% {\n transform: rotateZ(0deg);\n }\n\n 0% {\n transform: rotateZ(360deg);\n }\n}\n\n.front {\n transform: rotateY(180deg);\n color: white;\n}\n\n.front .front-content {\n position: absolute;\n width: 100%;\n height: 100%;\n padding: 10px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.front-content .badge {\n background-color: #00000055;\n padding: 2px 10px;\n border-radius: 10px;\n backdrop-filter: blur(2px);\n width: fit-content;\n}\n\n.description {\n box-shadow: 0px 0px 10px 5px #00000088;\n width: 100%;\n padding: 10px;\n background-color: #00000099;\n backdrop-filter: blur(5px);\n border-radius: 5px;\n}\n\n.title {\n font-size: 11px;\n max-width: 100%;\n display: flex;\n justify-content: space-between;\n}\n\n.title p {\n width: 50%;\n}\n\n.card-footer {\n color: #ffffff88;\n margin-top: 5px;\n font-size: 8px;\n}\n\n.front .img {\n position: absolute;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n}\n\n.circle {\n width: 90px;\n height: 90px;\n border-radius: 50%;\n background-color: #ffbb66;\n position: relative;\n filter: blur(15px);\n animation: floating 2600ms infinite linear;\n}\n\n#bottom {\n background-color: #ff8866;\n left: 50px;\n top: 0px;\n width: 150px;\n height: 150px;\n animation-delay: -800ms;\n}\n\n#right {\n background-color: #ff2233;\n left: 160px;\n top: -80px;\n width: 30px;\n height: 30px;\n animation-delay: -1800ms;\n}\n\n@keyframes floating {\n 0% {\n transform: translateY(0px);\n }\n\n 50% {\n transform: translateY(10px);\n }\n\n 100% {\n transform: translateY(0px);\n }\n}"}

tricky-robin-67

👁 实时预览

📝 源代码