文 | 杨小爱
写在前面
关于这个CSS实现的文本动画效果，我们在前面也分享过很多，今天这个是一个输入文本框样式的动画效果，它的最终效果如下：
<html><head><meta charset="UTF-8"><title>【每日一练】105—CSS实现一款输入文本动画的效果</title><!--CSS文件--><link rel="stylesheet" href="style.css"></head><body><div class="container"><div class="inputBox"><input type="text" required="required"><span>你的昵称</span><i></i></div></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;background: linear-gradient(45deg,#8E2DE2,#4A00E0);}.container{position: relative;padding: 50px;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 8px;box-shadow: 0 15px 35px rgba(0,0,0,0.25);}.container .inputBox{position: relative;width: 350px;}.container .inputBox input{position: relative;padding: 8px 10px;width: 100%;border: none;outline: none;background: transparent;color: #fff;font-size: 1.25em;letter-spacing: 0.05em;z-index: 2;}.container .inputBox span{position: absolute;left: 0;padding: 10px 0;pointer-events: none;font-size: 1em;transition: 0.5s;color: #333;letter-spacing: 0.05em;}.container .inputBox input:valid ~ span,.container .inputBox input:focus ~ span{font-size: 0.85em;transform: translateY(-32px);}.container .inputBox i{position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: linear-gradient(45deg,#8E2DE2,#4A00E0);transition: 0.5s;z-index: 1;border-radius: 4px;pointer-events: none;}.container .inputBox input:valid ~ i,.container .inputBox input:focus ~ i{height: 100%;box-shadow: inset 0 0 10px rgba(0,0,0,0.25);}
写在最后
今天的【每日一练】就到这里了，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐阅读
web前端开发的视频
，赞 5
学习更多技能
请点击下方公众号
