{"html":"

Card Title

\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis,\n deleniti officia. Aliquam repellendus illum pariatur nesciunt dolor et\n natus consectetur repudiandae suscipit autem distinctio commodi vel sed,\n id inventore modi.\n

\n View More\n \n

","css":".card {\n position: relative;\n width: 350px;\n height: 180px;\n box-sizing: border-box;\n background-color: #212121;\n border: 5px solid #222;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n padding: 10px;\n box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,\n rgba(0, 0, 0, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n transition: all ease-in-out 0.3s;\n overflow: hidden;\n}\n\n.card:hover {\n box-shadow: rgba(193, 44, 223, 0.19) 0px 10px 20px,\n rgba(193, 44, 223, 0.23) 0px 6px 6px,\n inset rgba(0, 0, 0, 0.19) 0px 10px 20px,\n inset rgba(0, 0, 0, 0.23) 0px 6px 6px;\n border: 5px solid #b671d6;\n}\n\n.card-title {\n margin: 0;\n font-size: 18px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n cursor: default;\n}\n\n.card-des {\n margin: 0;\n font-size: 15px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 600;\n color: #fff;\n -webkit-box-orient: vertical;\n overflow: hidden;\n display: -webkit-box;\n word-break: break-all;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n cursor: default;\n}\n\n.card-text {\n position: absolute;\n margin: 0;\n font-size: 14px;\n font-family: \"Lucida Sans\", \"Lucida Sans Regular\", \"Lucida Grande\",\n \"Lucida Sans Unicode\", Geneva, Verdana, sans-serif;\n font-weight: 400;\n color: #fff;\n right: 20px;\n bottom: 5px;\n display: flex;\n align-items: center;\n gap: 3px;\n opacity: 0;\n transition: all ease-in-out 0.3s;\n animation: textanimate 0.8s alternate infinite;\n cursor: pointer;\n}\n\n.card:hover > .card-text {\n opacity: 1;\n}\n\n@keyframes textanimate {\n 0% {\n right: 20px;\n }\n\n 100% {\n right: 10px;\n }\n}\n\n.arrow-icon {\n font-size: 15px;\n font-weight: 500;\n}"}

tame-termite-90

👁 实时预览

📝 源代码