【每日一練】81—CSS實(shí)現(xiàn)輸入文本動(dòng)畫(huà)效果
我們練習(xí)的這個(gè)效果，是一個(gè)登錄頁(yè)面的文本信息輸入的動(dòng)畫(huà)效果，具體效果如下：
<html lang="en"><head><meta charset="UTF-8"><title>【每日一練】81—CSS實(shí)現(xiàn)輸入文本動(dòng)畫(huà)效果</title></head><body><div class="inputBox"><input type="text" required="required"><span>昵稱(chēng)</span><i></i></div><div class="inputBox"><input type="text" required="required"><span>真名</span><i></i></div></body></html>
*{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;flex-direction: column;gap: 30px;background: #222;}.inputBox{position: relative;width: 250px;}.inputBox input{width: 100%;padding: 10px 0 5px;background: transparent;outline: none;box-shadow: none;border: none;color: #fff;font-size: 1em;letter-spacing: 0.1em;transition: 0.5s;}.inputBox span{position: absolute;left: 0;padding: 10px 0 5px;pointer-events: none;font-size: 1em;color: rgba(255,255,255,0.5);text-transform: uppercase;letter-spacing: 0.1em;transition: 0.5s;}.inputBox input:valid ~ span,.inputBox input:focus ~ span{color: #2196f3;transform: translateY(-16px);font-size: 0.65em;}.inputBox i{position: absolute;left: 0;bottom: 0;width: 100%;height: 2px;background: #fff;overflow: hidden;}.inputBox 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;}.inputBox input:valid ~ i::before,.inputBox input:focus ~ i::before{left: 0;}@keyframes animate{0%{background-position-x: 0;}100%{background-position-x: 250px;}}
寫(xiě)在最后
以上就是今天【每日一練】的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺(jué)得有幫助的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
我是楊小愛(ài)，我們明天見(jiàn)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情