江象网站建设,猎头公司排行,北京网站建站,资阳优化团队资讯一个input输入框的小动画,大家可以按需引入和修改 input的动画表现为,文字提示波浪动画
效果图如下
源码如下 tips: 有不懂的可以在评论区问博主
!DOCTYPE html
html langenheadmeta charsetUTF-8meta name!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title文字波浪input输入框/titlestyle/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 200;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 200;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 200;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 300;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 300;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 300;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 600;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 800;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 800;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 800;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}/* devanagari */font-face {font-family: Poppins;font-style: normal;font-weight: 900;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z11lFc-K.woff2) format(woff2);unicode-range: U0900-097F, U1CD0-1CF9, U200C-200D, U20A8, U20B9, U25CC, UA830-A839, UA8E0-A8FF;}/* latin-ext */font-face {font-family: Poppins;font-style: normal;font-weight: 900;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1JlFc-K.woff2) format(woff2);unicode-range: U0100-02AF, U0304, U0308, U0329, U1E00-1E9F, U1EF2-1EFF, U2020, U20A0-20AB, U20AD-20CF, U2113, U2C60-2C7F, UA720-A7FF;}/* latin */font-face {font-family: Poppins;font-style: normal;font-weight: 900;font-display: swap;src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5Z1xlFQ.woff2) format(woff2);unicode-range: U0000-00FF, U0131, U0152-0153, U02BB-02BC, U02C6, U02DA, U02DC, U0304, U0308, U0329, U2000-206F, U2074, U20AC, U2122, U2191, U2193, U2212, U2215, UFEFF, UFFFD;}* {margin: 0;padding: 0;box-sizing: border-box;font-family: Poppins, sans-serif;}body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #29313a;}.inputBox {position: relative;width: 350px;}.inputBox input {position: relative;width: 100%;padding: 10px 0;background-color: transparent;border: none;outline: none;border-bottom: 2px solid #999;color: #fff;letter-spacing: 0.05em;font-size: 1.25em;transition: 0.5s;}.inputBox label {position: absolute;left: 0;padding: 10px 0;pointer-events: none;color: #666;}.inputBox label span {position: relative;display: inline-flex;flex-direction: row;font-size: 1.25em;letter-spacing: 0.05em;transition: .25s cubic-bezier(.5, 1, .5, 1.5);}.inputBox input:focus~label span,.inputBox input:valid~label span {color: #0f0;text-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0;transform: translateY(-30px);}.inputBox input:focus,.inputBox input:valid {border-bottom: 2px solid #fff;}/style
/headbodydiv classinputBoxinput typetext requiredlabel forWavynbsp;Inputnbsp;Textnbsp;Animation/label/divscriptlet label document.querySelector(label);label.innerHTML label.innerText.split().map((v, i) span styletransition-delay: ${i * 30}ms;filter: hue-rotate(${i * 10}deg);${v}/span).join()/script
/body/html
