欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

制作 input 动画(前端动画)

程序员文章站 2022-06-22 20:10:23
前端动画(无废话)html 主体
&...

前端动画(无废话)
制作 input 动画(前端动画)
html 主体

 <div class="wrapper"> <div class="input-data"> <input type="text" required> <div class="underline"></div> <label>输入</label> </div> </div> 

css 样式

* { margin: 0; padding: 0; outline: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(-135deg, #c850c0, #4158d0); } .wrapper { width: 450px; background: #fff; padding: 30px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .wrapper .input-data { height: 40px; width: 100%; position: relative; } .wrapper .input-data input { height: 100%; width: 100%; border: none; font-size: 17px; border-bottom: 2px solid silver; } .input-data input:focus~label,
.input-data input:valid~label { transform: translateY(-20px); font-size: 15px; color: #ff0000; } .wrapper .input-data label { position: absolute; bottom: 10px; left: 0; color: grey; pointer-events: none; transition: all 0.3s ease; } .wrapper .input-data .underline { position: absolute; bottom: 0px; height: 2px; width: 100%; } .input-data .underline:before { position: absolute; content: ""; height: 100%; width: 100%; background: #ff0000; transform: scaleX(0); transition: transform 0.5s ease; } .input-data input:focus~.underline:before,
.input-data input:valid~.underline:before { transform: scaleX(1); } 

本文地址:https://blog.csdn.net/qq_43562262/article/details/107889525

相关标签: Web前端