其他
【每日一练】81—CSS实现输入文本动画效果
我们练习的这个效果，是一个登录页面的文本信息输入的动画效果，具体效果如下：
<!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>*{ 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; }}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号