css悬浮展开搜索框效果代码

代码语言:html

所属分类:搜索

代码描述:css悬浮展开搜索框效果代码

代码标签: css 悬浮 搜索

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
<style>
    body {
	margin:0;
	padding:0;
	background:#ff5252;
}
.search__box {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:#2f3640;
	height:40px;
	border-radius:40px;
	padding:10px 15px 10px 15px;
}
.search__box:hover >.search__txt {
	width:240px;
	padding:0 6px;
}
.search__box:hover >.search__btn {
	background:#fff;
}
.search__box:hover >.search__btn i {
	color:#34ace0;
	transition:0.9s;
}
.search__btn {
	color:#e84118;
	float:right;
	width:40px;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0