css实现悬浮伸缩搜索框效果代码

代码语言:html

所属分类:搜索

代码描述:css实现悬浮伸缩搜索框效果代码

代码标签: css 搜索框

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

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

<head>
    <meta charset="UTF-8">

    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
	background-image:linear-gradient(to right,#cb2d3e,#ef473a);
}
.searchBox {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,50%);
	background:#2f3640;
	height:40px;
	border-radius:40px;
	padding:10px;
}
.searchBox:hover >.searchInput {
	width:240px;
	padding:0 6px;
}
.searchBox:hover >.searchButton {
	background:white;
	color:#2f3640;
}
.searchButton {
	color:white;
	float:right;
	width:40px;
	height:40px;
	border-radius:50%;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0