{"html":"

\n \n \n

\n","css":".input__container {\n position: relative;\n background: #f0f0f0;\n padding: 20px;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 15px;\n border: 4px solid #000;\n max-width: 350px;\n transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);\n transform-style: preserve-3d;\n transform: rotateX(10deg) rotateY(-10deg);\n perspective: 1000px;\n box-shadow: 10px 10px 0 #000;\n}\n\n.input__container:hover {\n transform: rotateX(5deg) rotateY(1 deg) scale(1.05);\n box-shadow: 25px 25px 0 -5px #e9b50b, 25px 25px 0 0 #000;\n}\n\n.shadow__input {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n bottom: 0;\n z-index: -1;\n transform: translateZ(-50px);\n background: linear-gradient(\n 45deg,\n rgba(255, 107, 107, 0.4) 0%,\n rgba(255, 107, 107, 0.1) 100%\n );\n filter: blur(20px);\n}\n\n.input__button__shadow {\n cursor: pointer;\n border: 3px solid #000;\n background: #e9b50b;\n transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n transform: translateZ(20px);\n position: relative;\n z-index: 3;\n font-weight: bold;\n text-transform: uppercase;\n}\n\n.input__button__shadow:hover {\n background: #e9b50b;\n transform: translateZ(10px) translateX(-5px) translateY(-5px);\n box-shadow: 5px 5px 0 0 #000;\n}\n\n.input__button__shadow svg {\n fill: #000;\n width: 25px;\n height: 25px;\n}\n\n.input__search {\n width: 100%;\n outline: none;\n border: 3px solid #000;\n padding: 15px;\n font-size: 18px;\n background: #fff;\n color: #000;\n transform: translateZ(10px);\n transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n z-index: 3;\n font-family: \"Roboto\", Arial, sans-serif;\n letter-spacing: -0.5px;\n}\n\n.input__search::placeholder {\n color: #666;\n font-weight: bold;\n text-transform: uppercase;\n}\n\n.input__search:hover,\n.input__search:focus {\n background: #f0f0f0;\n transform: translateZ(20px) translateX(-5px) translateY(-5px);\n box-shadow: 5px 5px 0 0 #000;\n}\n\n.input__container::before {\n content: \"USERNAME\";\n position: absolute;\n top: -15px;\n left: 20px;\n background: #e9b50b;\n color: #000;\n font-weight: bold;\n padding: 5px 10px;\n font-size: 14px;\n transform: translateZ(50px);\n z-index: 4;\n border: 2px solid #000;\n}\n"}

wise-lizard-57

👁 实时预览

📝 源代码