{"html":"

\n buttons\n forms\n switches\n cards\n buttons\n

\n","css":".card {\n /* color used to softly clip top and bottom of the .words container */\n --bg-color: #111;\n background-color: var(--bg-color);\n padding: 1rem 2rem;\n border-radius: 1.25rem;\n}\n.loader {\n color: rgb(124, 124, 124);\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 25px;\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n height: 40px;\n padding: 10px 10px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n border-radius: 8px;\n}\n\n.words {\n overflow: hidden;\n position: relative;\n}\n.words::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(\n var(--bg-color) 10%,\n transparent 30%,\n transparent 70%,\n var(--bg-color) 90%\n );\n z-index: 20;\n}\n\n.word {\n display: block;\n height: 100%;\n padding-left: 6px;\n color: #956afa;\n animation: spin_4991 4s infinite;\n}\n\n@keyframes spin_4991 {\n 10% {\n -webkit-transform: translateY(-102%);\n transform: translateY(-102%);\n }\n\n 25% {\n -webkit-transform: translateY(-100%);\n transform: translateY(-100%);\n }\n\n 35% {\n -webkit-transform: translateY(-202%);\n transform: translateY(-202%);\n }\n\n 50% {\n -webkit-transform: translateY(-200%);\n transform: translateY(-200%);\n }\n\n 60% {\n -webkit-transform: translateY(-302%);\n transform: translateY(-302%);\n }\n\n 75% {\n -webkit-transform: translateY(-300%);\n transform: translateY(-300%);\n }\n\n 85% {\n -webkit-transform: translateY(-402%);\n transform: translateY(-402%);\n }\n\n 100% {\n -webkit-transform: translateY(-400%);\n transform: translateY(-400%);\n }\n}\n"}

fresh-lizard-20

👁 实时预览

📝 源代码