css制作查询图标

使用CSS制作查询图标

使用CSS可以轻松创建简洁的查询图标（放大镜图标）。以下是几种实现方法：

方法一：纯CSS绘制放大镜

通过伪元素和边框属性绘制一个放大镜形状：

.search-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
}

.search-icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  bottom: -5px;
  right: -6px;
}

方法二：使用旋转矩形和圆形组合

通过两个元素的组合实现更精确的放大镜效果：

.search-container {
  position: relative;
  width: 24px;
  height: 24px;
}

.search-circle {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.search-handle {
  width: 8px;
  height: 2px;
  background: currentColor;
  position: absolute;
  bottom: 3px;
  right: 0;
  transform: rotate(45deg);
  transform-origin: right center;
}

方法三：使用CSS渐变和变换

利用CSS渐变创建更简洁的图标：

.search-icon {
  width: 24px;
  height: 24px;
  background: 
    radial-gradient(circle, currentColor 20%, transparent 20%),
    linear-gradient(currentColor, currentColor);
  background-size: 8px 8px, 2px 10px;
  background-position: 0 0, 12px 12px;
  background-repeat: no-repeat;
  transform: rotate(45deg);
}

方法四：使用CSS变量控制颜色

添加CSS变量使图标颜色可动态变化：

:root {
  --search-color: #333;
}

.search-icon {
  width: 20px;
  height: 20px;
  border: 2px solid var(--search-color);
  border-radius: 50%;
  position: relative;
}

.search-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: var(--search-color);
  transform: rotate(45deg);
  bottom: -4px;
  right: -6px;
}

方法五：添加动画效果

为查询图标添加悬停动画：

.search-icon {
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 50%;
  position: relative;
  transition: transform 0.3s ease;
}

.search-icon::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  bottom: -4px;
  right: -6px;
  transition: width 0.3s ease;
}

.search-icon:hover {
  transform: scale(1.1);
}

.search-icon:hover::after {
  width: 10px;
}

这些方法提供了不同复杂度的CSS查询图标实现方案，可根据项目需求选择最适合的方式。通过调整尺寸、颜色和动画参数，可以轻松定制图标外观。