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属性