利用css3实现一款好看的搜索框效果

风舞红枫

已于 2022-03-17 17:47:04 修改

阅读量772

点赞数 1

分类专栏： css 文章标签： css

于 2021-02-26 16:48:56 首次发布

本文链接：https://blog.csdn.net/qq_42231248/article/details/114140311

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图
请添加图片描述
实现代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		html,body{
			height:100%;
			background: #000;
		}
		div{
			height:30px;
			overflow:hidden;
			width:300px;
			position:relative;
			margin:0 auto;
			top:30%;
		}
		div:hover p:nth-of-type(1){
			height:0;
		}
		div:hover p:nth-of-type(2){
			height:0;
		}
		div:hover p:nth-of-type(2):after{
			transform:translateY(-30px);
		}
		p{
			height:15px;
			transition:height .5s;
			overflow:hidden;
			position:absolute;
			transition:height .5s;
		}
		p:nth-of-type(1){
			top:0;
			border-radius: 8px 8px 0 0;
		}
		p:nth-of-type(2){
			bottom:0;
			border-radius: 0 0 8px 8px;
		}
		p:nth-of-type(2):after{
			transition:transform .5s;
		}
		p:after{
			content:'请输入搜索内容';
			font-size: 14px;
			display:block;
			width:300px;
			height:30px;
			line-height:30px;
			background:rgba(222,222,222,0.8);
			text-align:center;
		}
		p:nth-of-type(2):after{
			transform:translateY(-15px);
		}
		input{
			float:left;
			height:30px;
			width:300px;
			border:none;
			border-radius: 6px;
			outline: none;
		}
	</style>
</head>
<body>
	<div>
		<p></p>
		<input type="text" name="">
		<p></p>
	</div>
</body>
</html>