CSS
语言：
CSSSCSS
确定
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: lightslategray;
}
.search-icon {
background-color: lightslategray;
height: 2.8em;
width: 2.8em;
display: block;
padding: 0.5em;
margin: 1em auto;
position: relative;
cursor: pointer;
border-radius: 4px;
}
.circle {
position: relative;
display: block;
height: 24px;
width: 24px;
background-color: lightslategray;
border-radius: 50px;
z-index: 0;
border: 6px solid white;
transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: 1;
}
.handle {
position: absolute;
background-color: white;
top: 29px;
left: 6px;
width: 50px;
height: 6px;
display: block;
transform: rotate(45deg);
float: right;
border-radius: 2px;
}
.handle:after {
content: "";
background-color: white;
width: 50px;
height: 6px;
display: block;
float: right;
border-radius: 2px;
transition: all 0.6s cubic-bezier(0.25, 1.7, 0.35, 0.8);
z-index: -1;
}
.open .circle {
transform: scale(0.02);
transform-origin: 20% 20%;
background: white;
border-color: white;
}
.open .handle:after {
transform-origin: center center;
transform: rotate(90deg);
}
如果觉得《html在搜索按钮中加放大镜 CSS3 搜索按钮动效 - 放大镜图标变叉叉》对你有帮助，请点赞、收藏，并留下你的观点哦！
