本文介绍了一个使用纯CSS实现的交互式搜索框动画效果。通过CSS3的transform和transition属性，实现了搜索图标到输入框的平滑过渡。文章详细展示了如何设置元素的位置、尺寸以及动画效果。
CSS
语言：
CSSSCSS
确定
body {
color: #b3c33a;
background-color: #333;
}
.search {
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -54px;
width: 600px;
}
svg {
position: absolute;
transform: translateX(-246px);
width: 600px;
height: auto;
stroke-width: 8px;
stroke: #b3c33a;
stroke-width: 1px;
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transition: all 0.5s ease-in-out;
}
.input-search {
position: absolute;
width: calc(100% - 148px);
height: 64px;
top: 0;
right: 20px;
bottom: 0;
left: 0;
border: none;
background-color: transparent;
outline: none;
padding: 20px;
font-size: 50px;
}
.search-label {
position: absolute;
display: block;
width: 108px;
height: 108px;
top: 0;
left: 50%;
margin-left: -54px;
z-index: 100;
transition: 0.5s ease-in-out;
}
.isActive .search-label {
transform: translateX(246px);
}
.isActive svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.isActive.full svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.full .search-label {
transform: translateX(246px);
}
.full svg {
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transform: translateX(0);
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
