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