CSS制作超棒搜索框

最新推荐文章于 2024-02-23 23:51:32 发布

K.Dream

最新推荐文章于 2024-02-23 23:51:32 发布

阅读量1.1k

点赞数 4

分类专栏： html css

原文链接：https://youtu.be/v1PeTDrw6OY

版权

css 同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

html

84 篇文章 0 订阅

订阅专栏

CSS制作超棒搜索框

教程地址：原文地址（YouTube）

两个视频的内容相同，第二个为转载

效果图

代码区

以下代码为本人填写，转载请注明教程地址和本贴地址

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link type="text/css" href="style.css" rel="stylesheet" />
		<script src="https://use.fontawesome.com/1ff3fda05c.js"></script>
		<title></title>
	</head>
	<body>
		<div class="search-box">
			<input class="search-txt" type="text" name="" placeholder="搜索信息" />
			<a class="serach-btn" href="#">
				<i class="fa fa-search" aria-hidden="true"></i>
			</a>
		</div>
	</body>
</html>

CSS

body{
	margin: 0; /*外边距*/
	padding: 0; /*内边距*/
	background: #e84118; /*背景颜色*/
}
.search-box{
	position:absolute; /*绝对定位*/
	top: 50%; /*距上部*/
	left: 50%; /*距左部*/
	transform: translate(-50%,-50%); /*修改动画定位*/
	background: #2f3640;
	height: 40px;
	border-radius: 40px; /*边框圆角*/
	padding: 10px;
}
.search-box:hover > .search-txt{ /*子元素*/
	width: 240px;
	padding:  0 6px;
}
.search-box:hover > .serach-btn{
	background: white;
	transform: rotateY(360deg); /*Y轴旋转*/
	}
.serach-btn{
	color: #e84118;
	float: right;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #2f3640;
	display: flex; /*盒模型*/
	justify-content: center; /*主轴对齐方式*/
	align-items: center; /*副轴对齐方式*/
	transition: 1.8s;	 /*过渡时间*/
}
.search-txt{
	border: none; /*边框无*/
	background: none;
	outline: none; /*轮廓*/
	float: left;
	padding: 0;
	color: white;
	font-size: 16px;
	transition: 0.5s;
	line-height: 40px; /*行高*/
	width: 0px;
}

JS

教程地址：原文地址（YouTube）

K.Dream

关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
CSS制作超棒搜索框

CSS制作超棒搜索框教程地址：原文地址（YouTube）两个视频的内容相同，第二个为转载效果图代码区以下代码为本人填写，转载请注明教程地址和本贴地址html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link type="text/css" hre...
复制链接

扫一扫

专栏目录