css3 图标制作
CSS3 图标制作方法
使用伪元素和CSS形状
通过CSS3的伪元素（::before、::after）结合border、transform等属性绘制简单图标。例如制作一个三角形：
.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #ff5722;
}利用渐变和阴影
CSS3的linear-gradient、box-shadow等特性可创建复杂图标效果。例如制作一个渐变圆形按钮：
.circle-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}SVG内联嵌入
将SVG代码直接嵌入HTML，通过CSS控制样式。例如一个简单的SVG图标：
<svg class="svg-icon" width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2L4 12l8 10 8-10z" fill="currentColor"/>
</svg>.svg-icon {
color: #3f51b5;
transition: transform 0.3s;
}
.svg-icon:hover {
transform: scale(1.2);
}字体图标（Icon Font）
使用@font-face引入字体图标库（如Font Awesome），通过CSS调整大小和颜色：
@font-face {
font-family: 'FontAwesome';
src: url('path/to/fontawesome.woff2') format('woff2');
}
.icon {
font-family: 'FontAwesome';
font-size: 24px;
color: #e91e63;
}CSS动画图标
结合@keyframes为图标添加动态效果。例如旋转加载图标：
.loader {
width: 24px;
height: 24px;
border: 3px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top-color: #09f;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}响应式图标设计
使用vw或rem单位确保图标适应不同屏幕尺寸：
.responsive-icon {
width: 5vw;
height: 5vw;
max-width: 48px;
max-height: 48px;
}注意事项
- 复杂图标建议优先使用SVG方案，矢量特性保证清晰度
- 纯CSS图标适合简单形状，减少HTTP请求
- 字体图标需注意加载性能和字体文件大小
- 动画性能优化：优先使用
transform和opacity属性
