css3 图标制作

CSS3 图标制作方法

使用伪元素和边框
通过CSS的::before和::after伪元素结合边框属性可以创建简单图标。例如三角形图标：

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid #333;
}

利用transform属性
旋转和缩放元素可组合出复杂形状。如制作一个加号图标：

.plus-icon {
  position: relative;
  width: 20px;
  height: 2px;
  background: #000;
}
.plus-icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 20px;
  background: #000;
  left: 9px;
  top: -9px;
}

CSS渐变背景
线性渐变和径向渐变可绘制特殊效果。例如圆形渐变按钮：

.gradient-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff0000 0%, #990000 70%);
}

SVG与CSS结合
通过内联SVG或背景图引入矢量图标，用CSS控制样式：

.svg-icon {
  width: 24px;
  height: 24px;
  background: url('data:image/svg+xml;utf8,<svg>...</svg>') no-repeat;
}

动画效果增强
添加悬停或点击动画提升交互性：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.animate-icon:hover {
  animation: spin 1s linear infinite;
}

注意事项

• 复杂图标建议使用SVG或字体图标库（如Font Awesome）
• 移动端需测试性能，避免过多CSS绘制影响流畅度
• 使用CSS变量（--color-icon）便于主题切换