写在前面
关于这个CSS实现的文本动画效果，我们在前面也分享过很多，今天这个是一个输入文本框样式的动画效果，它的最终效果如下：
HTML:
<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>【每日一练】105—CSS实现一款输入文本动画的效果</title><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>
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;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前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
