css图标制作

使用CSS制作图标的方法

纯CSS绘制基础形状

通过CSS的border、width、height等属性可以绘制简单图标：

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

此代码会生成一个三角形图标。

伪元素组合技巧

利用::before和::after伪元素创建复杂图形：

.heart {
  position: relative;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
}
.heart::before {
  top: -10px;
  left: 0;
}
.heart::after {
  top: 0;
  left: -10px;
}

CSS渐变与阴影

使用linear-gradient和box-shadow增强效果：

.sun {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, gold 40%, transparent 41%),
              linear-gradient(0deg, transparent 48%, gold 48%, gold 52%, transparent 52%),
              linear-gradient(90deg, transparent 48%, gold 48%, gold 52%, transparent 52%);
}

动画交互效果

添加transition或@keyframes实现动态图标：

.loading {
  width: 20px;
  height: 20px;
  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); }
}

使用现成图标方案

Font Awesome集成

通过CDN引入后直接使用类名：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<i class="fas fa-cog"></i>

Material Icons应用

Google提供的Material图标库：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span class="material-icons">favorite</span>

SVG sprite技术

将多个图标整合为SVG sprite：

<svg class="icon">
  <use xlink:href="sprite.svg#home"></use>
</svg>

性能优化建议

CSS图标适合简单图形，复杂图标建议使用SVG。关键属性如transform和opacity能触发GPU加速，提升动画性能。对于多色图标，CSS变量可以方便地管理颜色方案：

:root {
  --icon-primary: #4285f4;
  --icon-secondary: #ea4335;
}
.icon {
  color: var(--icon-primary);
}