css实现input搜索框展开动画

已于 2022-11-15 10:22:57 修改
阅读量2.8k 收藏 53
点赞数 8
分类专栏： css 文章标签： css 前端 html
于 2022-09-02 01:04:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48085286/article/details/126653273
版权

1.实现效果

在这里插入图片描述

2.实现原理

CSS 选择器： CSS 中，选择器是选取需设置样式的元素的模式。

CSS :focus 选择器：
一个输入字段获得焦点时选择的样式，:focus选择器用于选择具有焦点的元素，接受键盘事件或其他用户输入的元素。

CSS :invalid 选择器:
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。 :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

CSS :valid 选择器:
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。:valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

element+element 选择器（相邻兄弟选择器）：可选择紧接在另一个元素后的元素，且二者有相同父元素。
例：h1+p{}：选择紧跟 h1元素的首个 p元素。

element1~element2 选择器：
例：p ~ ul：选择前面有p 元素的每个 ul元素。

CSS3 :not 选择器::not(selector) 选择器匹配每个元素是不是指定的元素/选择器。

:placeholder-shown：使用此伪类来设置当前显示占位符文本的输入的样式。将样式应用于具有占位符文本的 input或 textarea。:placeholder-showd必须具有占位符（placeholder），当输入文本不为空时候，动态设置input框样式。

input 的required 属性：
required 属性是一个布尔属性。required 属性规定必需在提交表单之前填写输入字段。required 属性适用于下面的 input 类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。

CSS font-style 属性：
font-style属性指定文本的字体样式。

值描述
normal默认值。浏览器显示一个标准的字体样式。
italic浏览器会显示一个斜体的字体样式。
oblique浏览器会显示一个倾斜的字体样式。
inherit规定应该从父元素继承字体样式。

3.实现步骤

3.1 示例1

在这里插入图片描述

  • 先写一个input标签+搜索按钮。
<div class=" input-box mb20">
	<input type="text" class="input" />
	<span class="span">搜</span>
</div>

.input-box {
	position: relative;
	display: inline-block;
}

.input {
	padding: 0 40px 0 20px;
	width: 160px;
	height: 38px;
	font-size: 14px;
	border: 1px solid #eee;
	border-radius: 40px;
	background: #eee;
	transition: width .5s;
	transition-delay: .1s;
}

.span {
	position: absolute;
	top: 4px;
	right: 5px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	padding: 0;
	color: #969696;
	text-align: center;
	background: #222;
	border-radius: 50%;
	font-size: 15px;
	cursor: pointer;
}
  • 当焦点移入时，input:focus属性，修改input的宽度，添加transition过渡效果。通过加号选择器，改变span标签的样式。
.input:focus {
	width: 280px;
	outline: none;
	box-shadow: none;
}
	
.input:focus+.span {
	background-color: pink;
	color: #fff;
}

3.2 示例2

在这里插入图片描述

  • 先写一个圆形按钮+input输入框。
<div class="btn-box mb20">
	<span>搜</span>
	<input type="text" placeholder=" " />
</div>

.btn-box {
	color: #fff;
	width: auto;
	border-radius: 25px;
	min-width: 50px;
	height: 50px;
	line-height: 50px;
	display: inline-block;
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
	background-size: 104% 104%;
	cursor: pointer;
}

.btn-box span {
	position: absolute;
	right: 0;
	top: 0;
	width: 50px;
	height: 50px;
	text-align: center;
	font-size: 18px;
	cursor: pointer;
}

.btn-box input {
	display: inline-block;
	background: 0 0;
	border: none;
	color: #fff;
	padding-left: 20px;
	line-height: 50px !important;
	height: 50px;
	box-sizing: border-box;
	vertical-align: 4px;
	font-size: 16px;
	width: 50px;
	transition: all .3s ease-in-out;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 5px;
}
  • 悬浮按钮时，修改input宽度，添加transition过渡效果。当输入文字之后，即占位符为空，保持input宽度。
.btn-box:hover input {
	display: inline-block;
	width: 160px;
	padding-right: 50px
}

.btn-box input:not(:placeholder-shown) {
	display: inline-block;
	width: 160px;
	padding-right: 50px
}

3.3 示例3

在这里插入图片描述

  • 先写一个input输入框+span文字+一条横线（x轴缩放为0）。
<div class="input-boxLine" >
	<input type="text" required />
	<div class="line"></div>
	<span>请输入搜索内容</span>
</div>

.input-boxLine {
	position: relative;
	width: 160px;
	height: 40px;
	margin-top: 10px;
}

.input-boxLine input {
	width: 100%;
	height: 100%;
	border: none;
	font-size: 17px;
	border-bottom: 1px solid #afaebd;
	color: #fff;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 5px;
}

.input-boxLine span {
	position: absolute;
	bottom: 10px;
	left: 0px;
	color: #afaebd;
	pointer-events: none;
	transition: all 0.3s ease;
}

.input-boxLine .line {
	position: absolute;
	bottom: 0px;
	height: 2px;
	width: 100%;
	background-color: #ffaa7f;
	transform: scaleX(0);
	transition: all 0.3s ease;
}
  • 当input获取焦点时（input:focus）或输入的文字有效时（input:valid），通过~选择器，将span标签文字上移并设置倾斜，横线缩放为1，添加transition过渡效果。
.input-boxLine input:focus~span,
.input-boxLine input:valid~span {
	top: -10px;
	font-size: 12px;
	color: #ffaa7f;
	font-style: oblique;
}

.input-boxLine input:focus~.line,
.input-boxLine input:valid~.line {
	transform: scaleX(1);
}

4.完整代码

<!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>input输入框展开动画</title>
	</head>
	<link rel="stylesheet" href="../common.css">
	<style>
		.mb20 {
			margin-bottom: 20px;
		}
		body {
			overflow: hidden;
			background: #222;
		}
		.input-box {
			position: relative;
			display: inline-block;
		}
		.input {
			padding: 0 40px 0 20px;
			width: 160px;
			height: 38px;
			font-size: 14px;
			border: 1px solid #eee;
			border-radius: 40px;
			background: #eee;
			transition: width .5s;
			transition-delay: .1s;
		}

		.span {
			position: absolute;
			top: 4px;
			right: 5px;
			width: 30px;
			height: 30px;
			line-height: 30px;
			padding: 0;
			color: #969696;
			text-align: center;
			background: #222;
			border-radius: 50%;
			font-size: 15px;
			cursor: pointer;
		}

		.input:focus {
			width: 280px;
			outline: none;
			box-shadow: none;
		}
		.input:focus+.span {
			background-color: pink;
			color: #fff;
		}
		/* 第二个 */
		.btn-box {
			color: #fff;
			width: auto;
			border-radius: 25px;
			min-width: 50px;
			height: 50px;
			line-height: 50px;
			display: inline-block;
			position: relative;
			overflow: hidden;
			background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
			background-size: 104% 104%;
			cursor: pointer;
		}
		.btn-box span {
			position: absolute;
			right: 0;
			top: 0;
			width: 50px;
			height: 50px;
			text-align: center;
			font-size: 18px;
			cursor: pointer;
		}
		.btn-box input {
			display: inline-block;
			background: 0 0;
			border: none;
			color: #fff;
			padding-left: 20px;
			line-height: 50px !important;
			height: 50px;
			box-sizing: border-box;
			vertical-align: 4px;
			font-size: 16px;
			width: 50px;
			transition: all .3s ease-in-out;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.btn-box:hover input,
		.btn-box input:not(:placeholder-shown) {
			display: inline-block;
			width: 160px;
			padding-right: 50px
		}

		/* 第三个 */
		.input-boxLine {
			position: relative;
			width: 160px;
			height: 40px;
			margin-top: 10px;
		}
		.input-boxLine input {
			width: 100%;
			height: 100%;
			border: none;
			font-size: 17px;
			border-bottom: 1px solid #afaebd;
			color: #fff;
			font-style: italic;
			text-transform: uppercase;
			letter-spacing: 5px;
		}
		.input-boxLine span {
			position: absolute;
			bottom: 10px;
			left: 0px;
			color: #afaebd;
			pointer-events: none;
			transition: all 0.3s ease;
		}
		.input-boxLine .line {
			position: absolute;
			bottom: 0px;
			height: 2px;
			width: 100%;
			background-color: #ffaa7f;
			transform: scaleX(0);
			transition: all 0.3s ease;
		}
		.input-boxLine input:focus~span,
		.input-boxLine input:valid~span {
			top: -10px;
			font-size: 12px;
			color: #ffaa7f;
			font-style: oblique;
		}
		.input-boxLine input:focus~.line,
		.input-boxLine input:valid~.line {
			transform: scaleX(1);
		}
	</style>

	<body>
		<div>
			<section>
				<div class=" input-box mb20">
					<input type="text" class="input" />
					<span class="span">搜</span>
				</div>
			</section>
			<section>
				<div class="btn-box mb20">
					<span>搜</span>
					<input type="text" placeholder=" " />
				</div>
			</section>
			<section>
				<div class="input-boxLine" data-span='苏苏小苏苏'>
					<input type="text" required />
					<div class="line"></div>
					<span>请输入搜索内容</span>
				</div>
			</section>
		</div>
	</body>
</html>

5.更多css相关，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

苏苏哇哈哈
关注
  • 8
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html在搜索栏中加入放大镜,CSS3 搜索条动画（放大镜图标展开为长方形输入框）...
weixin_35046143的博客
05-30 1168
CSS语言：CSSSCSS确定@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);body {background-color: #ff9800;}#content {position: absolute;top: 30%;left: 50%;width: 200px;height: 50px;marg...
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
12-28
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：https://codepen.io/MichaelArestad/full/ohLIa HTML 代码： <div class=row> <p>Click every input.</p> </div> <div class=row> <span> <input class=basic-slide id=name type=text p
HTML中input输入框（详解输入框的用法）
最新发布
百赢出品，必属精品
04-30 1万+
input>元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的type属性，可以定义不同类型的输入字段。类型（type）属性定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。常见类型包括textpasswordradiocheckboxfile等。名称（name）属性用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
每日分享html之两个input搜索框、两个button按钮、一个logo效果
小淼淼的博客
09-29 2879
每日分享html之两个input搜索框、两个button按钮、一个logo效果
input标签监听事件，搜索框精确查找案例
JIANGBAO_CSDN的博客
09-05 628
用input监听事件做一个搜索框搜索查找对应内容
vue2.0+Element UI 实现动态表单（点击按钮增删一排输入框）
weixin_30947043的博客
07-08 3741
对于动态增减表单项，Element UI 官方文档表单那一节已经介绍得很清楚了，我之前没有看见，绕了很多弯路，这里针对点击按钮增删一排输入框的问题做一个总结。 效果图如下 存在一排必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行 必填项很简单，就是普通表单： <el-form ref="form" :rules=...
CSS中常见隐藏元素的属性
weixin_45371730的博客
08-17 393
visibility：hidden 隐藏元素本身，并且在网页中 占位置 display：none 隐藏元素本身，并且在网页中 不占位置（常用） overflow：hidden 隐藏超出盒子的内容部分（超出的内容虽隐藏但占位） 案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.
input搜索框实时检索功能实现（亲测有效，超级好用）
m0_52813455的博客
05-14 4934
一：目前监听input输入框有三种方法： 第一种是onchange事件，触发条件：内容改变且失去焦点。 第二种是onpropertychange事件，触发条件：元素内容改变即触发，另外js改变内容，该元素的属性改变也会触发。但只在IE11以下支持。 第三种是html5的oninput事件，触发条件：value值的改变，但是js方式改变value不会触发，且在IE8以上及其他标准浏览器支持。 二：采用最简单的html5的oninput事件，onchange事件触发条件无法达到理想的输入即检索，onproper
css3实现3d搜索框特效特效代码
03-20
本知识点将详细探讨如何使用CSS3实现一个3D搜索框特效，这将为你的网页增添独特的视觉吸引力。 首先，我们需要理解CSS3中的关键概念。3D变换是CSS3的一个重要特性，它允许我们在二维平面上创建出立体效果。主要的3D...
纯CSS3霓虹样式搜索框动画特效特效代码
03-20
【纯CSS3霓虹样式搜索框动画特效特效代码】是一个利用现代CSS3技术实现的创新设计，它将传统的搜索框赋予了霓虹灯般的视觉效果，并且带有动态展开与收缩的交互功能。这个特效主要依赖于CSS3的transform属性，通过...
css3实现3d搜索框.zip
11-17
本教程将详细讲解如何利用CSS3实现一个具有3D效果的搜索框，同时结合JavaScript、jQuery和HTML5，构建一个交互性强、视觉效果出色的搜索界面。 首先，HTML5是构建网页的基础，它引入了一些新的元素，如`<input type...
CSS3制作炫酷搜索框动画特效
03-21
一款很炫的css3的搜索框
js+css实现可搜索的下拉选择框插件
05-09
例如，我们可以使用`$("#selectId").on("input", function() {...})`监听输入事件，当用户在搜索框中输入文字时触发相应的处理函数。 CSS部分则负责样式设计，创建一个美观且响应式的搜索框。通过设置适当的CSS属性...
使用css3和jquery实现可伸缩搜索框
12-13
在需要放置搜索条的页面中放置如下html代码，搜索条#search_bar包含一个form#myform表单，表单中放置一个搜索输入框#search，一个搜索按钮.search_btn以及搜索按钮图标.search_ico。 复制代码代码如下:”search_bar...
CSS元素的显示和隐藏
weixin_44703582的博客
10-15 719
目录 前言 一、display 二、visibility 三、overflow 总结 前言 在CSS中，隐藏和显示是我们经常会用到的方法，最常用的方法有三种：display、visibility、overflow。它们的主要目的是让一个元素在页面中消失，但并不是让它们被删除掉，比如网页中的小广告，关掉以后再次刷新页面又会重新出现。 一、display 要点：display元素隐藏后，不再占有原来的位置。 用途：配合js做特效，比如下拉菜单，原先没有，鼠标经过显示下拉菜单，...
html高级搜索,jQuery和CSS3炫酷高级搜索框设计效果
weixin_36049183的博客
06-04 471
插件描述：这是一款使用jQuery和CSS3制作的炫酷高级搜索框设计效果。在这个高级搜索框设计中，当用户点击了搜索按钮之后，会出现搜索输入框，以及一个带相关搜索链接的面板供用户选择。HTML结构该高级搜索框的HTML结构有3个部分组成：一个元素，用于包裹导航条。一个div.cd-main-search，用于制作搜索框。还有一个main.cd-main-content是页面的主体部分。Sea...
CSS中的display和visibility属性
CSDN_Boris的博客
11-04 653
display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。 dispaly:block; 显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来
html 输入框加搜索框,如何实现一个input搜索框？
weixin_29415667的博客
06-05 3567
这是默认样式 这是聚焦后显示 这是输入内容看着很简单对吧，我一开始也是这么想的，结果当我做起来我发现.....这tm就离谱先说下我怎么实现的，元素是input，中间的图片用背景图，搜索岗位是placeholder，当focus时，我给input元素添加类，然后让text-align: left;，background-image:none;当blur时，我再判断框内value是否不为空，如果为空，...
css3实现超好看的搜索框和按钮
热门推荐
叶才鑫
08-14 1万+
input[type=text], input[type=password] { font-size: 13px; min-height: 32px; margin: 0; padding: 7px 8px; outline: none; color: #333; background-color: #fff; background-repeat: no-repeat; background-po
htmlcss搜索页面代码
05-05
以下是一个简单的 HTML/CSS 搜索页面的代码示例： HTML 代码： ``` <!DOCTYPE html> <html> <head> <title>搜索页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; } .search-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; border-radius: 4px; } input[type=submit] { background-color: #4CAF50; color: #fff; padding: 12px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } </style> </head> <body> <div class="search-container"> <h1>搜索页面</h1> <form action="#"> <label for="search-input">搜索：</label> <input type="text" id="search-input" name="search-input" placeholder="输入搜索关键词..."> <input type="submit" value="搜索"> </form> </div> </body> </html> ``` CSS 代码： ``` body { font-family: Arial, sans-serif; background-color: #f5f5f5; } .search-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; border-radius: 4px; } input[type=submit] { background-color: #4CAF50; color: #fff; padding: 12px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } ``` 以上代码将创建一个具有搜索输入框和提交按钮的简单搜索页面。您可以根据需要进行自定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值