{"html":"

Main Title

\n \n \n \n

\n Title 1\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus, facere.\n \n\n

\n Title 2\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic praesentium\n nobis cumque, dolores adipisci?\n \n

\n Title 3\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea, facilis!\n \n

","css":".card {\n position: relative;\n width: 230px;\n height: 300px;\n background: linear-gradient(-45deg, rgb(0, 153, 255) 0%, cyan 100%);\n overflow: hidden;\n border: 1px solid black;\n box-shadow: rgba(141, 177, 205, 0.618) 0px 40px 30px -25px;\n transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.card:hover {\n transform: scale(1.08);\n box-shadow: rgba(141, 177, 205, 0.618) 0px 30px 30px -25px;\n}\n\n.icons-container {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 1rem;\n z-index: 999;\n}\n\n.icons-container .svg {\n stroke: white;\n width: 20px;\n transition: transform 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.icons-container .svg:hover {\n transform: scale(1.5);\n stroke: black;\n}\n\n.icons-container .twitter {\n fill: white;\n}\n\n.icons-container .twitter:hover {\n fill: black;\n stroke: none;\n}\n\n.logo {\n width: 50px;\n padding: 1rem;\n}\n\n.logo .svg {\n fill: white;\n}\n\n.title {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n color: White;\n font-weight: bold;\n font-size: 1.1rem;\n}\n\n.box {\n position: absolute;\n width: 100%;\n height: 100%;\n box-shadow: rgba(66, 66, 66, 0.349) 5px 0px 10px 0px inset;\n transition: all 0.5s ease-in-out;\n display: grid;\n place-content: center;\n padding: 2rem 2rem 3rem 2rem;\n border: 1px solid black;\n}\n\n.box .content {\n position: relative;\n transform: translateY(-100%);\n opacity: 0;\n transition: all 0.5s ease-in-out 0.3s;\n}\n\n.box .content .box-title {\n display: block;\n color: white;\n font-size: 1.2rem;\n font-weight: bold;\n margin-bottom: 1rem;\n}\n\n.box .content .box-text {\n color: rgba(255, 255, 255, 0.738);\n font-size: 0.8rem;\n}\n\n.box:hover {\n right: 0;\n top: 0;\n border-radius: 0;\n border: 1px solid transparent;\n box-shadow: rgba(66, 66, 66, 0) 5px 0px 10px 0px inset;\n}\n\n.box:hover .content {\n transform: translate(0, 0);\n opacity: 1;\n}\n\n.box1 {\n top: -85%;\n right: -40%;\n background: rgb(255, 112, 60);\n border-radius: 200px;\n}\n\n.box2 {\n top: -70%;\n right: -45%;\n background: rgb(255, 174, 0);\n border-radius: 200px;\n}\n\n.box3 {\n top: -62%;\n right: -30%;\n background: rgb(255, 194, 52);\n border-radius: 200px;\n}"}

moody-rat-79

👁 实时预览

📝 源代码