这两款输入框样式是在微信公众号程序员大澈看到的,原文提供了Vue组件实现。本页面将其改写为纯CSS实现,方便在各种Web项目中直接使用。

波浪输入框 CSS
                /* 波浪输入框样式 */
                .wave-group {
                    position: relative;
                    margin: 30px auto;
                    width: 280px;
                }
        
                .wave-group .input {
                    font-size: 16px;
                    padding: 12px 15px 12px 15px;
                    display: block;
                    width: 100%;
                    border: none;
                    border-bottom: 1px solid #515151;
                    background: transparent;
                    box-sizing: border-box;
                    height: 50px;
                }
        
                .wave-group .input:focus {
                    outline: none;
                }
        
                .wave-group .label {
                    color: #999;
                    font-size: 18px;
                    font-weight: normal;
                    position: absolute;
                    pointer-events: none;
                    left: 5px;
                    top: 10px;
                    display: flex;
                }
        
                .wave-group .label-char {
                    transition: 0.2s ease all;
                    transition-delay: calc(var(--index) * .05s);
                }
        
                .wave-group .input:focus~.label .label-char,
                .wave-group .input:valid~.label .label-char {
                    transform: translateY(-20px);
                    font-size: 14px;
                    color: #5264AE;
                }
        
                .wave-group .bar {
                    position: relative;
                    display: block;
                    width: 100%;
                }
        
                .wave-group .bar:before,
                .wave-group .bar:after {
                    content: '';
                    height: 2px;
                    width: 0;
                    bottom: 1px;
                    position: absolute;
                    background: #5264AE;
                    transition: 0.2s ease all;
                    -moz-transition: 0.2s ease all;
                    -webkit-transition: 0.2s ease all;
                }
        
                .wave-group .bar:before {
                    left: 50%;
                }
        
                .wave-group .bar:after {
                    right: 50%;
                }
        
                .wave-group .input:focus~.bar:before,
                .wave-group .input:focus~.bar:after {
                    width: 50%;
                }
渐变边框输入框 CSS
                /* 渐变边框输入框样式 */
                .form-control {
                    position: relative;
                    margin: 30px auto;
                    width: 280px;
                }
        
                .input {
                    color: #685b5b;
                    font-size: 0.9rem;
                    background-color: transparent;
                    width: 100%;
                    box-sizing: border-box;
                    padding-inline: 0.5em;
                    padding-block: 0.7em;
                    border: none;
                    border-bottom: var(--border-height) solid var(--border-before-color);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }
        
                .input-border {
                    position: absolute;
                    background: var(--border-after-color);
                    width: 0%;
                    height: 2px;
                    bottom: 0;
                    left: 0;
                    transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
                }
        
                .input:focus {
                    outline: none;
                }
        
                .input:focus+.input-border {
                    width: 100%;
                }
        
                .input-alt {
                    font-size: 16px;
                    padding: 12px 15px;
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                    color: #333;
                    background-color: #f5f5f5;
                    height: 50px;
                    box-sizing: border-box;
                }
        
                .input-border-alt {
                    height: 3px;
                    background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
                    transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
                }
        
                .input-alt:focus+.input-border-alt {
                    width: 100%;
                }