好看的输入框直接上代码大自然的搬运工+++++++++++++++++++++++++++++++++++++

直接上代码

<div class="inputBoxparent">
            <div class="inputBox">
                <input type="text" required />
                <span>在这搜索想要的</span>
                <i></i>
            </div>
        </div>

.inputBoxparent {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // min-height: 100vh;
    // flex-direction: column;
    // gap: 30px;
    // background: #222;


    .inputBox {
        position: relative;
        width: 250px;
        // margin-left: 35vw;

        input {
            width: 100%;
            background: transparent;
            color: black;
            border: none;
            outline: none;
            box-shadow: none;
            font-size: 1em;
            letter-spacing: 0.1em;
            padding: 10px 0 5px;
        }

        span {
            position: absolute;
            left: 0;
            padding: 10px 0 5px;
            // color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
            pointer-events: none;
            letter-spacing: 0.1em;
            transition: 0.5s;
        }

        input:valid~span,
        input:focus~span {
            color: #2196f3;
            transform: translateY(-16px);
            font-size: 8px;
        }

        i {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 2px;
            background: black;
            overflow: hidden;
        }

        i::before {
            content: '';
            position: absolute;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #ff1b69, #ff0, #2196f3, #9c27b0, #ff1b69);
            animation: animate 2s linear infinite;
            transition: 0.5s;
        }

        input:valid~i::before,
        input:focus~i::before {
            left: 0;
        }

        @keyframes animate {
            0% {
                background-position-x: 0;
            }

            100% {
                background-position-x: 250px;
            }
        }
    }
}