一个好看的input输入动画

大家可以先看一下输入框输入效果

这个效果需要注意的就是输入框触发的时机问题，在输入框获取焦点的时候：Name文字会向上移动，输入框的下边距会出现。
会用到input标签的focus和valid

:focus

定义：获得焦点的元素，一般用于表单(input、textarea);
触发条件：当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。

:valid

定义：伪类指定一个通过匹配正确的所要求的表单元素;
在这里:valid主要的功能是在input输入框失去焦点是保持最后的状态。

下面是代码部分：
html部分：

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

下面是css代码部分

*{margin: 0;padding: 0;outline: none;box-sizing: border-box;
}
body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(-135deg,#c850c0,#4158d0);
}
.wrapper{width: 450px;background-color: #fff;padding: 30px;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{width: 100%;height: 40px;position: relative;
}
.wrapper .input-data input{width: 100%;height: 100%;border: none;border-bottom: 2px solid silver;font-size: 17px;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label{transform: translateY(-20px);font-size: 15px;color: #4158D0;
}
.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: #4158D0;transform: scaleX(0);transition:transform 0.3s ease;
}.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before{transform: scaleX(1);
}

下面就是完整的代码部分，需要的小伙伴直接复制就可以了。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><style type="text/css">*{margin: 0;padding: 0;outline: none;box-sizing: border-box;}body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(-135deg,#c850c0,#4158d0);}.wrapper{width: 450px;background-color: #fff;padding: 30px;box-shadow: 0px 0px 10px rgba(0,0,0,0.1);}.wrapper .input-data{width: 100%;height: 40px;position: relative;}.wrapper .input-data input{width: 100%;height: 100%;border: none;border-bottom: 2px solid silver;font-size: 17px;}.input-data input:focus ~ label,.input-data input:valid ~ label{transform: translateY(-20px);font-size: 15px;color: #4158D0;}.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: #4158D0;transform: scaleX(0);transition:transform 0.3s ease;}.input-data input:focus ~ .underline:before,.input-data input:valid ~ .underline:before{transform: scaleX(1);}</style><body><div class="wrapper"><div class="input-data"><input type="text" required="" /><div class="underline"></div><label>Name</label></div></div></body>
</html>

最后，整理不易，走过路过的小伙伴们，留个赞再走吧。

一个好看的input输入动画相关推荐

html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
[js] 写一个方法，实时验证input输入的值是否满足金额如：3.56(最多只有两位小数且只能数字和小数点)的格式，其它特殊字符禁止输入
[js] 写一个方法,实时验证input输入的值是否满足金额如:3.56(最多只有两位小数且只能数字和小数点)的格式,其它特殊字符禁止输入 <body><input type=&qu ...
设置input输入长度中文一个文字等于2个引文字符为了解决这个问题
/** * 设置input输入长度中文一个文字等于2个引文字符为了解决这个问题 * 使用 maxcodelength="" 即可 */ $('input[type=" ...
《UnityAPI.Input输入》（Yanlz+Unity+SteamVR+云技术+5G+AI+VR云游戏+Input+anyKey+gyro+GetAxis+GetKey+立钻哥哥++OK++）
<UnityAPI.Input输入> 版本作者参与者完成日期备注 UnityAPI_Input_V01_1.0 严立钻 2020.06.18 #<UnityAPI.Input ...
限制input输入小数只能到3位或者只能输入正整数(兼容ios)
我们在做表单输入时,有时候对于有些输入比较有限制,比如输入天数必须为正整数,再比如有些特殊需求需要输入保留小数点的后面n位.那么我们如何在输入环节就限制用户的输入情况呢? 我们可以用正则表达式来限制. ...
Python---编写一个函数，提示输入两个数字a,b，并进行a与b的除法运算。
题目: 编写一个函数,提示输入两个数字 a,b ,并进行 a 与 b 的除法运算,把运算结果打印出来.要求对输入和程序进行检测,可以排除所有的错误. 源代码: def devision():try:a ...
ARM Linux内核Input输入子系统浅解
--以触摸屏驱动为例第一章.了解linux input子系统 Linux输入设备总类繁杂,常见的包括有按键.键盘.触摸屏.鼠标.摇杆等等,他们本身就是字符设备,而linux内核将这些设备 ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
python字符串input输入_5.print()函数、转义字符、python注释、常量、字符串、格式化输出、input()输入...
目录 1.内置函数:print() 2.转义字符: 3.python注释: 4.常量: 5.字符串: 6.格式化输出: 7.input()输入: 8.学习单词: 1.内置函数:print() prin ...

一个好看的input输入动画

:focus

:valid

一个好看的input输入动画相关推荐

最新文章

热门文章