css 简单的搜索框动画效果

/* 设置搜索框的基本样式 */
.search-input {
  width: 240px;
  height: 50px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 25px;
  font-size: 18px;
  background-color: #f7f7f7;
  transition: width 0.5s ease-in-out; /* 添加过渡动画以实现动态变化 */
}
 
/* 当搜索框获得焦点时，改变宽度 */
.search-input:focus {
  width: 400px;
  outline: none; /* 去除浏览器自带的焦点样式 */
}
 
/* 可以添加一个伪元素来增加一个放大镜的图标 */
.search-input::before {
  content: url('search-icon.png'); /* 替换为你的图标路径 */
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
  pointer-events: none; /* 使伪元素不接收鼠标事件 */
}

这段代码为一个搜索框设置了基本样式，并且通过:focus伪类在用户输入时使搜索框宽度变化，同时添加了一个放大镜图标。通过transition属性，我们为宽度变化添加了平滑的动画效果。