图标css制作
使用CSS制作图标的方法
内联SVG结合CSS 将SVG代码直接嵌入HTML，通过CSS控制样式和动画：
<svg class="icon" viewBox="0 0 24 24">
<path d="M12 2L4 12l8 10 8-10z"/>
</svg>.icon {
width: 24px;
height: 24px;
fill: currentColor;
transition: transform 0.3s;
}
.icon:hover {
transform: scale(1.2);
fill: #ff4757;
}伪元素创建简单图标
利用::before或::after生成几何图形：
.checkbox-icon::before {
content: "";
display: inline-block;
width: 16px;
height: 8px;
border-left: 3px solid #2ed573;
border-bottom: 3px solid #2ed573;
transform: rotate(-45deg);
margin-right: 6px;
}CSS背景图像方案
通过background-image引用外部SVG或PNG：
.download-icon {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,<svg...>');
background-size: contain;
filter: invert(100%);
}纯CSS绘制复杂图标 组合多种CSS属性创建矢量图形：
.menu-icon {
width: 24px;
height: 14px;
position: relative;
}
.menu-icon::before,
.menu-icon::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #333;
}
.menu-icon::before {
top: 0;
box-shadow: 0 6px 0 #333;
}
.menu-icon::after {
bottom: 0;
}响应式图标技术
视口单位适配
使用vw或vmin确保图标随视口缩放：
.responsive-icon {
width: calc(16px + 1vw);
height: calc(16px + 1vw);
}媒体查询调整 针对不同设备修改图标样式：
@media (max-width: 768px) {
.nav-icon {
padding: 8px;
border-radius: 50%;
background: rgba(0,0,0,0.1);
}
}动画增强技巧
关键帧动画 创建加载状态图标动画：
@keyframes spin {
to { transform: rotate(360deg); }
}
.loader-icon {
animation: spin 1s linear infinite;
border: 3px solid rgba(0,0,0,0.1);
border-top-color: #5352ed;
border-radius: 50%;
}变形过渡效果 实现图标状态切换：
.heart-icon {
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.heart-icon.active {
transform: scale(1.3);
color: #ff6b81;
}性能优化建议
- 优先使用CSS绘制的简单图标，减少HTTP请求
- 对复杂图标采用SVG sprite技术
- 使用
will-change: transform;提升动画性能 - 通过
transform替代width/height变化实现缩放动画 - 对静态图标启用
transform: translateZ(0)触发GPU加速
可访问性处理
<button aria-label="搜索">
<span class="search-icon" aria-hidden="true"></span>
</button>.search-icon {
/* 图标样式 */
pointer-events: none;
}
