css+j实现一个创意输入框搜索框focus关注动画效果代码
代码语言:html
所属分类:搜索
代码描述:css+j实现一个创意输入框搜索框focus关注动画效果代码
代码标签: css 创意 输入框 搜索框 focus 关注 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Arvo:wght@700&display=swap"); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; background: #d7dde7; height: 100vh; position: relative; margin: 0; } h1 { color: #d10490; font-family: "Arvo", serif; padding: 20px 40px; font-size: 42px; line-height: 52px; margin: 30px 0; text-align: center; } .container { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 80%; } .control-group { padding-top: 33px; position: relative; } .control-group input[type=text] { -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 6px solid #9fa6b3; background: #fff; border-radius: 0; color: #222; font-family: "Poppins", sans-serif; font-size: 20px; font-weight: 400; outline: none; padding: 16px 15px; transition-duration: 400ms; transition-property: border-color; width: 100%; } .control-group input[type=text].push-input-content-up { animation-name: pushInputContentUp; animation-duration: 750ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: pushInputContentUp; -webkit-animation-duration: 750ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text]:focus { border-color: #2d9ae3; animation-name: inputContentsBouncingDown; animation-delay: 910ms; animation-duration: 500ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: inputContentsBouncingDown; -webkit-animation-delay: 910ms; -webkit-animation-duration: 500ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text] + label::before, .control-group input[type=text] + label::after { content: ""; display: inline-block; height: 6px; left: 6px; position: absolute; top: 33px; width: 95%; outline: none; } .control-group input[type=text] + label::before { background: #fff; height: 7px; opacity: 0; } .control-group input[type=text] + label.close-trapped-door::before { opacity: 1; } .control-group input[type=text]:focus + label.hide-gap::before { opacity: 1; animation-name: hideGap; animation-delay: 800ms; animation-duration: 1ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: hideGap; -webkit-animation-delay: 800ms; -webkit-animation-duration: 1ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text] + label::after { background: #9fa6b3; transition-duration: 400ms; transform-origin: top right; transition-property: background; } .control-group input[type=text] + label.close-trapped-door::after { animation-name: trappedDoorClosing; animation-delay: 600ms; animation-duration: 300ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: trappedDoorClosing; -webkit-animation-delay: 600ms; -webkit-animation-duration: 300ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text]:focus + label::after { background: #2d9ae3; animation-name: trappedDoorBounce, trappedDoorVanish; animation-delay: 1ms, 600ms; animation-duration: 700ms, 300ms; animation-iteration-count: 1, 1; animation-timing-function: ease, ease; animation-fill-mode: forwards, forwards; -webkit-animation-name: trappedDoorBounce, trappedDoorVanish; -webkit-animation-delay: 1ms, 600ms; -webkit-animation-duration: 700ms, 300ms; -webkit-animation-iteration-count: 1, 1; -webkit-animation-timing-function: ease, ease; -webkit-animation-fill-mode: forwards, forwards; } .control-group input[type=text]:focus + label::before { animation-name: trappedDoorOpening; animation-delay: 0ms; animation-duration: 1ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: trappedDoorOpening; -webkit-animation-delay: 0ms; -webkit-animation-duration: 1ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text] + label { background: #9fa6b3; color: #fff; font-weight: 500; left: 0; padding: 5px 20px 5px 20px; position: absolute; top: 0; transition-duration: 400ms; transition-property: background; } .control-group input[type=text]:focus + label { background: #2d9ae3; animation-name: labelBouncingDown; animation-delay: 801ms; animation-duration: 750ms; animation-iteration-count: 1; animation-timing-function: ease; animation-fill-mode: forwards; -webkit-animation-name: labelBouncingDown; -webkit-animation-delay: 801ms; -webkit-animation-duration: 750ms; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } .control-group input[type=text].push-input-content-up + label.........完整代码请登录后点击上方下载按钮下载查看
网友评论0