{"html":"

Add a friend

\n \n

-----

\n","css":".input-add-friend {\n width: 17em;\n height: 11em;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n --color: rgb(169, 116, 255);\n --background-color: rgb(36, 34, 39);\n}\n\n.input-add-friend .input-add-friend-title {\n display: flex;\n align-self: flex-start;\n margin-left: 0.5em;\n}\n.input-add-friend-title {\n width: 8em;\n height: 2em;\n background-color: var(--background-color);\n color: white;\n display: flex;\n justify-content: center;\n font-weight: bold;\n font-family: monospace, sans-serif;\n box-shadow:\n -0.05em 0em var(--color),\n -0.05em -0.05em var(--color),\n 0.05em -0.05em var(--color);\n position: relative;\n z-index: 1;\n align-items: center;\n}\n.input-add-friend-input {\n width: 16em;\n height: 8em;\n background-color: var(--background-color);\n\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 1em;\n font-weight: bold;\n box-shadow:\n -0.05em 0em var(--color),\n -0.05em 0.05em var(--color),\n 0.05em 0.05em var(--color),\n 0.05em -0.05em var(--color),\n 0em 0em 2.5em 0em rgb(121, 174, 30, 0.15);\n position: relative;\n z-index: 0;\n animation: change-box-shadow 5s linear infinite;\n}\n\n@keyframes change-box-shadow {\n 0% {\n box-shadow:\n -0.05em 0em var(--color),\n -0.05em 0.05em var(--color),\n 0.05em 0.05em var(--color),\n 0.05em -0.05em var(--color),\n 0em 0em 2.5em 0em rgb(169, 116, 255, 0);\n }\n 50% {\n box-shadow:\n -0.05em 0em var(--color),\n -0.05em 0.05em var(--color),\n 0.05em 0.05em var(--color),\n 0.05em -0.05em var(--color),\n 0em 0em 2.5em 0em rgb(169, 116, 255, 0.25);\n }\n 100% {\n box-shadow:\n -0.05em 0em var(--color),\n -0.05em 0.05em var(--color),\n 0.05em 0.05em var(--color),\n 0.05em -0.05em var(--color),\n 0em 0em 2.5em 0em rgb(169, 116, 255, 0);\n }\n}\n.input-add-friend-input input {\n width: 16em;\n height: 2.5em;\n\n border: solid 0.5em transparent;\n font-family: monospace, sans-serif;\n color: var(--background-color);\n font-weight: bold;\n outline: none;\n padding-left: 3.5em;\n letter-spacing: 1em;\n background-color: transparent;\n position: relative;\n z-index: 4;\n}\n\n.input::placeholder {\n color: var(--background-color);\n font-weight: bold;\n font-family: monospace, sans-serif;\n}\n\n.input-add-friend-checkbox:hover + label {\n opacity: 75%;\n}\n\n.input-add-friend-checkbox:hover + label p {\n font-size: 14px;\n transition: all 0.25s ease-in-out;\n}\n\n.input-add-friend-checkbox + label {\n width: 13.25em;\n height: 2.25em;\n border: solid 0.5em var(--color);\n background-color: var(--color);\n font-family: monospace, sans-serif;\n color: var(--background-color);\n font-weight: bold;\n outline: none;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.25s ease-in-out;\n}\n\n.input-add-friend svg {\n position: absolute;\n top: -2.25em;\n right: 0em;\n}\n\n.input-add-friend-checkbox:active + label {\n background-color: white;\n border: white;\n}\n\n.input-add-friend:has(.input-add-friend-checkbox:checked) {\n filter: hue-rotate(-120deg);\n transition: all 0.25s ease-in-out;\n}\n\n.input-add-friend-checkbox:checked ~ svg {\n animation: jumpicon 0.75s infinite linear;\n animation-iteration-count: 1;\n}\n\n@keyframes jumpicon {\n 0% {\n top: -2.25em;\n transform: rotate(0deg) scale(1);\n }\n 25% {\n top: -2.5em;\n transform: rotate(0deg) scale(1.15);\n }\n 50% {\n top: -2.5em;\n transform: rotate(10deg) scale(1.15);\n }\n 75% {\n top: -2.5em;\n transform: rotate(-10deg) scale(1.15);\n }\n 95% {\n transform: rotate(0deg) scale(1);\n }\n 100% {\n top: -2.25em;\n transform: rotate(0deg) scale(1);\n }\n}\n\n.input-add-friend-text {\n color: var(--background-color);\n position: absolute;\n letter-spacing: 0.85em;\n top: 1.65em;\n left: 5.25em;\n z-index: 3;\n}\n\n.input-add-friend-input-behind {\n width: 13.25em;\n height: 2.25em;\n top: 1.35em;\n font-family: monospace, sans-serif;\n color: var(--background-color);\n font-weight: bold;\n background-color: rgb(255, 255, 255);\n position: absolute;\n z-index: 2;\n}\n"}

brown-chipmunk-49

👁 实时预览

📝 源代码