css3 图标制作
使用CSS3制作图标的方法
纯CSS绘制基础形状
通过CSS的border、transform、box-shadow等属性组合可创建简单图标。例如绘制三角形：
.triangle {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #ff5722;
}伪元素增强效果
利用::before和::after伪元素创建复杂图形。如制作放大镜图标：
.search-icon {
position: relative;
width: 40px;
height: 40px;
border: 3px solid #333;
border-radius: 50%;
}
.search-icon::after {
content: "";
position: absolute;
width: 10px;
height: 3px;
background: #333;
transform: rotate(45deg);
bottom: -10px;
right: -8px;
}CSS渐变实现立体感
使用linear-gradient或radial-gradient创建渐变效果图标：
.sun-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(circle, #ffeb3b 30%, #ffc107 70%);
box-shadow: 0 0 10px #ffeb3b;
}动画交互效果
添加transition或@keyframes使图标动态化：
.loading-icon {
width: 30px;
height: 30px;
border: 3px solid rgba(0,0,0,0.1);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}组合多个元素
通过嵌套多个HTML元素实现复杂图标结构：
<div class="settings-icon">
<div class="cog"></div>
<div class="cog inner"></div>
</div>.settings-icon {
position: relative;
width: 40px;
height: 40px;
}
.cog {
width: 100%;
height: 100%;
background:
linear-gradient(0deg, transparent 40%, #555 40%, #555 60%, transparent 60%),
linear-gradient(60deg, transparent 40%, #555 40%, #555 60%, transparent 60%),
linear-gradient(120deg, transparent 40%, #555 40%, #555 60%, transparent 60%);
}
.inner {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
transform: rotate(30deg);
}响应式适配
使用vw/vh或em单位确保图标自适应：
.responsive-icon {
width: 1em;
height: 1em;
font-size: calc(12px + 1vw);
}性能优化建议
- 优先使用CSS变换而非位置动画
- 减少不必要的阴影和渐变层级
- 对静态图标考虑使用
will-change: transform
这些方法可以灵活组合，通过调整尺寸、颜色和变换参数，能创建出各种风格的矢量图标，无需依赖图片或字体文件。
