一个好看的input输入动画

最新推荐文章于 2023-12-26 11:26:18 发布
最新推荐文章于 2023-12-26 11:26:18 发布
阅读量538 收藏 10
点赞数 4
原文链接：https://blog.csdn.net/qq_39224105/article/details/111773655?utm_medium=distribute.pc_category.none-task-blog-hot-14.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-14.nonecase
版权

大家可以先看一下输入框输入效果
在这里插入图片描述

在这里插入图片描述
这个效果需要注意的就是输入框触发的时机问题，在输入框获取焦点的时候：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);
}

  • *{
        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>

  • <!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>

     

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

猴猴猴赛雷
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Animated-Text-Input:一个React组件来创建动画文本输入
05-11
动画文字输入 一个组件来创建动画文本输入。 演示与范例 。 或者，您可以下载此存储库并在本地运行。 跑步： npm install jspm install gulp 安装与使用 该模块是使用和ES6在的帮助下编写的。 先决条件： ReactJS JSPM 安装 jspm install animated-text-input=github:f15gdsy/animated-text-input 用 // Import like this. ES6 syntax import AnimatedTextInput from 'animated-text-input' ; // And Use it like this. < AnimatedTextInput texts = { [ 'Hello World!' , 'This is an animate
html怎么设置好看的文本框,14种CSS3炫酷表单input输入框美化效果
weixin_27183235的博客
06-03 5158
这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插件就是一个很好的例子。这个插件中的效果大多数是使用CSS transitions来切换伪元素制作的。HTML结构HTML结构使用一个span作为wrapper，包裹住input和它的label。为了效果能正常工作，要将label放...
input输入粒子动画
03-31
input输入动画。由canvas实现。pc,移动都OK ...................................................................
CSS3输入文字input文本框动画效果
09-13
CSS3输入文字input文本框动画效果
jquery炫酷Input表单输入文字动画特效插件
12-11
Fancy Input是一款效果非常炫酷的Input表单输入文字动画特效jquery插件。它使用CSS3来制作动画特效，共提供了5种输入文字动画特效。
各种炫酷input样式
06-01
各种炫酷input样式
ant design vue动态添加输入框，输入框动态样式bug
licongmingli的博客
12-26 246
写了一个button点击事件动态添加输入框，当输入框为2个及以上时，在输入框右侧新增一个删除功能图标。，所以当新增输入框时，删除的icon会立即执行，而input框会在0.3s后改变宽度为90%。在这里使用了v-bind 对input输入框的style样式进行动态更新。
CSS3技巧31：placeholder 动画
九天翔龙的技术博客
12-10 553
这里只是用 label 标签去模拟 placeholder，并且添加动画。placehoder 可以做 CSS 动画？
【转】input输入框的各种样式
weixin_30821731的博客
05-05 9645
输入框景背景透明：<input style="background:transparent;border:1px solid #ffffff"> 鼠标划过输入框，输入框背景色变色：<INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor=...
很漂亮又实用的的Input框，支持CSS或者图片两种样式。
06-22
很漂亮又实用的的Input框，支持CSS或者图片两种样式。
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
09-22
本文分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浮动的label
qq_45991812的博客
10-12 441
正在上传…重新上传取消图片来自JVFloatLabeledTextField在web项目中，有一个很重的模块就是登陆/注册模块，这个模块的主体部分就是一个form表单，这个form表单包含两个重要input组（用户名/密码），每个input组都包含label和input，而关于的布局方案多种多样，不同的设计师有不同的设计风格，不同的前端工程师又有不同的实现方式。通过对比发现，现在的方案是既注重美观，又注重性能。那么，关于label和input都有哪些布局方案呢?
html5 input标签好看的字体样式,漂亮的input样式
weixin_34698515的博客
07-14 3074
htmlOption 1Option 2Option 3Option 4Option 5Option 6Option 7Option 8Click herecsshtml, body {height: 100%;}body {margin: 0;background: linear-gradient(#eee, #ccc);overflow: hidden;}.selector {position...
【Css】input输入文本框的样式大全和搜索框实例（图文和完整源码）
热门推荐
【敦厚的曹操】的专栏
04-01 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
input标签的按钮效果
weixin_30294709的博客
11-08 1241
https://codepen.io/anon/pen/EOPMNy <div class="row"> <p>Click every input.</p></div><div class="row"> <span> <input class="basic-slide" id="name" type="...
一个好看的Input样式
weixin_30362801的博客
10-24 3510
<div class="search"> <input type="text"></div> .search{ text-align: center;}.search input{ margin: 0 auto; padding: 0 10px; width: 536px; height: 34px; border: ...
Java毕业设计-基于SSM框架的大学生社团管理系统带lw(源码+演示视频+说明).rar
最新发布
05-09
Java毕业设计-基于SSM框架的大学生社团管理系统带lw(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：ssm+vue 架构：B/S 数据库：mysql 【演示视频-编号：438】 https://pan.quark.cn/s/b3a97032fae7 【实现功能】 实现了社长管理，社团信息管理，社团分类管理，社团加入信息管理，社团成员登记管理，活动信息管理等功能。
用uniapp写一个input输入动画
03-22
可以使用uniapp提供的transition组件来实现input输入...这样就完成了一个简单的input输入动画效果，当用户点击输入框时，底部会出现一个蓝色的下划线，并且输入框上方的placeholder会向上移动一些，变成灰色的小字。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值