css3图标制作
CSS3 图标制作方法
使用伪元素和边框
通过 ::before 和 ::after 伪元素结合边框属性绘制简单几何图形：
.icon-arrow {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #333;
}调整边框宽度和颜色可创建不同方向的三角形。
利用渐变背景
线性渐变和径向渐变可构建复杂图形：
.icon-star {
width: 20px;
height: 20px;
background: linear-gradient(36deg, #ff0 50%, transparent 50%),
linear-gradient(-36deg, #ff0 50%, transparent 50%);
}通过叠加多个渐变层实现星形效果。
变换与旋转
transform 属性实现动态效果：
.icon-menu {
width: 20px;
height: 2px;
background: #000;
box-shadow: 0 6px 0 #000, 0 -6px 0 #000;
}配合 rotate() 和 scale() 可生成汉堡菜单图标。
使用 SVG 内联
CSS3 可直接控制 SVG 样式：
<div class="icon-svg" style="width: 24px; height: 24px;">
<svg viewBox="0 0 24 24">
<path d="M12 2L4 12l8 10 8-10z" fill="currentColor"/>
</svg>
</div>通过 CSS 修改 fill 或 stroke 属性实现颜色变化。
动画效果
@keyframes 创建动态图标：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.icon-loading {
animation: spin 1s linear infinite;
}适用于加载状态指示器。
注意事项
- 复杂图标建议使用 SVG 方案
- 移动端需考虑
-webkit-前缀兼容性 - 使用
currentColor继承父元素文字颜色 - 通过
will-change: transform优化动画性能
