这两款输入框样式是在微信公众号程序员大澈看到的,原文提供了Vue组件实现。本页面将其改写为纯CSS实现,方便在各种Web项目中直接使用。
/* 波浪输入框样式 */ .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%; }
/* 渐变边框输入框样式 */ .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%; }