CSS动画04--input输入框
介绍
此动画是当点击input框内部外部不同的动画，以上是鄙人录制得一个小视频，供大家参考，🤭
代码
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>input输入动画</title> <link rel="stylesheet" href="./css/4.css"> </head> <body> <div class="wrapper"> <div class="input-data"> <input type="text" required> <div class="underline"></div> <label>请输入内容：</label> </div> </div> </body> </html>
CSS
*{ margin: 0; padding: 0; outline: none; /* 这个属性是告诉浏览器：你想要设置的边框和内边距的值是包含在总宽高内的 */ box-sizing: border-box; } body{ /* 弹性布局 水平垂直居中 */ display: flex; justify-content: center; align-items: center; /* 设置body最小高度为100%窗口高度 */ min-height: 100vh; /* 渐变背景 */ /* background: linear-gradient(200deg,#0c3483,#a2b6df); */ background: linear-gradient(200deg,#ddd6f3,#faaca8); /* 200deg,#ddd6f3,#faaca8 */ } .wrapper{ width: 450px; background-color: #fff; /* 内边距（上下左右） */ padding: 40px; /* 盒子阴影 */ box-shadow: 0px 0px 10px rgba(0,0,0,0.1); /* 圆角 */ border-radius: 8px; } .wrapper .input-data{ /* 相对定位 */ position:relative; width: 100%; height: 40px; } .wrapper .input-data input{ width: 100%; height: 100%; border:none; font-size: 17px; border-bottom: 2px solid #c0c0c0; } /* 输入框获得焦点时 */ .wrapper .input-data input:focus ~ label, /* 输入框的值为合法时 */ .wrapper .input-data input:valid ~ label{ /* label上移，同时改变字号、字体颜色 */ transform: translateY(-25px); font-size: 15px; /* color: #2c6fdb; */ color: #faaca8; } .wrapper .input-data label{ /* 绝对定位 */ position: absolute; bottom: 10px; left: 0px; color: #808080; /* 这个属性可以使点击label穿透到输入框 */ pointer-events: none; /* 现在动画有点生硬，在这里需要给动画加个过渡 */ transition: all 0.3s ease; } .wrapper .input-data .underline{ position: absolute; bottom: 0px; height: 2px; width: 100%; /* background-color: #2c6fdb; */ background-color: #faaca8; /* 沿X轴缩小 */ transform: scaleX(0); /* 这里同样给动画加个过渡 */ transition: all 0.3s ease; } .wrapper .input-data input:focus ~ .underline, .wrapper .input-data input:valid ~ .underline{ /* 沿X轴放大 */ transform: scaleX(1); }
