当前位置：首页 > CSS

css制作搜索图标

2026-04-02 11:39:36CSS

使用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;
    bottom: -5px;
    right: -6px;
    transform: rotate(45deg);
}

方法二：纯CSS绘制

利用CSS的transform和border属性绘制放大镜：

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

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

方法三：使用SVG内联

虽然这不是纯CSS，但结合SVG可以更灵活地控制图标样式：

.search-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
    background-size: contain;
}

方法四：使用CSS动画增强交互

为搜索图标添加悬停动画效果：

css制作搜索图标

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

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

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

.search-icon:hover::after {
    transform: rotate(45deg) scale(1.1);
}

这些方法可以根据需求调整颜色、大小和动画效果，灵活应用于各种网页设计中。