html在搜索按钮中加放大镜,CSS3 搜索按钮动效 - 放大镜图标变叉叉

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);

}