CSS 扩展悬停搜索栏
作者：互联网
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>输入框悬浮</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #cfd1e1;
overflow: hidden;
}
.searchBox{
position: relative;
width: 65px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.searchBox:hover{
width: 400px;
}
.searchBox::before{
content: '';
position: absolute;
top:0;
left: 0;
width: 10px;
height: 100%;
background: linear-gradient(#fff,#fff,#e3e3e3);
z-index: 1;
filter: blur(1px);
}
.searchBox::after{
content: '';
position: absolute;
top:0;
right: -1px;
width: 10px;
height: 100%;
background:#9d9d9d;
z-index: 1;
filter: blur(1px);
}
.shadow{
position: absolute;
top:0;
left: -50px;
width: calc(100% + 50px);
height: 300px;
background: linear-gradient(180deg,rgba(0,0,0,0.1),
transparent,transparent);
transform-origin: top;
transform: skew(45deg);
pointer-events:none
}
.shadow::before{
content: '';
position: absolute;
width: 50px;
height: 50px;
background: #cfd1e1;
z-index:1;
}
.searchBox input{
position: relative;
width: 100%;
height: 100%;
border: none;
padding: 10px 25px;
outline: none;
font-size: 15px;
color: #555;
background: linear-gradient(#dbdae1,#a3aaba);
box-shadow: 5px 5px 5px rgba(0,0,0,0.1),
15px 15px 15px rgba(0,0,0,0.1),
20px 20px 15px rgba(0,0,0,0.1),
30px 30px 15px rgba(0,0,0,0.1),
inset 1px 1px 2px #fff
}
.searchBox input::placeholder,
.searchBox input
{
color: transparent;
}
.searchBox:hover input::placeholder,
.searchBox:hover input
{
color:#555
}
ion-icon{
position: absolute;
right: 25px;
}
</style>
</head>
<body>
<div class="searchBox">
<div class="shadow"></div>
<input type="text" placeholder="Search Anything You Want...">
<ion-icon name="search-outline"></ion-icon>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
// 另外不知道咋么使用<ion-icon>这个标签图标的小伙伴请移步菜鸟了解=====>
https://www.runoob.com/ionic/ionic-icon.htmlhttps://www.runoob.com/ionic/ionic-icon.html
标签：height,width,搜索,CSS,background,position,悬停,15px,searchBox 来源： https://blog.csdn.net/m0_46577631/article/details/122717794