web前端開發 - 【每日一練】81—CSS實現輸入文本動畫效果－鑽石舞台

我們練習的這個效果，是一個登錄頁面的文本信息輸入的動畫效果，具體效果如下：

看完了效果，我們再來看一下代碼實現過程，具體代碼如下：

HTML代碼：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>【每日一練】81—CSS實現輸入文本動畫效果</title></head><body> <div class="inputBox"> <input type="text" required="required"> <span>暱稱</span> <i></i> </div> <div class="inputBox"> <input type="text" required="required"> <span>真名</span> <i></i> </div></body></html>

CSS代碼：

*{ 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; }}

寫在最後

以上就是今天【每日一練】的全部內容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點讚我，關注我，並將它分享給你身邊做開發的朋友，也許能夠幫助到他。

我是楊小愛，我們明天見。

學習更多技能

請點擊下方公眾號