{"html":"

SAMPLE TEXT

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id dictum\n augue, id viverra.\n

\n","css":".container {\n position: relative;\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 0;\n background-color: #dfdfdf;\n}\n.container::after {\n content: \" \";\n position: absolute;\n height: 150px;\n width: 150px;\n left: 50%;\n top: 25%;\n transform: translateX(-100%);\n background-image: linear-gradient(orange, magenta);\n border-radius: 50%;\n z-index: -1;\n border: 2px solid #ffffffa6;\n box-shadow: inset 10px 0px 20px #fff;\n animation: ani 28s ease-in-out infinite;\n}\n.container::before {\n content: \" \";\n position: absolute;\n height: 80px;\n width: 80px;\n left: 46%;\n bottom: 25%;\n transform: translateX(-100%);\n background-image: linear-gradient(90deg, orange, magenta);\n border-radius: 50%;\n z-index: -1;\n border: 2px solid #ffffffa6;\n box-shadow: inset 10px 0px 20px #fff;\n}\n.card {\n width: 190px;\n height: 254px;\n border: 1px solid #ffffff56;\n border-radius: 10px;\n backdrop-filter: blur(10.5px);\n padding: 10px;\n position: relative;\n box-shadow: inset 2px 1px 6px #ffffff45;\n overflow: hidden;\n z-index: 0;\n}\n.card::after {\n z-index: -1;\n content: \" \";\n position: absolute;\n width: 150%;\n top: 0;\n left: 0;\n height: 10px;\n background: #ffffff;\n transform: rotateZ(50deg);\n filter: blur(30px);\n animation: shine 10s ease infinite;\n}\n.innerText {\n color: transparent;\n -webkit-background-clip: text;\n background-image: linear-gradient(90deg, rgb(0, 0, 0), rgb(116, 111, 111));\n font-size: 36px;\n font-weight: 800;\n line-height: 1em;\n margin: 10px 0px;\n}\n@keyframes ani {\n 0% {\n transform: translateX(0%) scale(1);\n }\n 50% {\n transform: translateX(-100%) scale(0.8);\n }\n 100% {\n transform: translateX(0%) scale(1);\n }\n}\n\n@keyframes shine {\n 0% {\n top: 100%;\n left: -100%;\n }\n 50%,\n 100% {\n top: 0%;\n left: 70%;\n }\n}\n.desc {\n padding: 4px;\n color: #3a3939;\n}\n"}

modern-lizard-75

👁 实时预览

📝 源代码