制作css icon

使用CSS制作图标的方法

纯CSS绘制基本形状
通过CSS的border、width、height等属性可以创建简单图标，例如三角形：

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

伪元素增强效果
利用::before和::after伪元素叠加复杂图形：

.heart {
  position: relative;
  width: 40px;
  height: 40px;
}
.heart::before, .heart::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 32px;
  background: #ff4757;
  border-radius: 20px 20px 0 0;
}
.heart::before {
  transform: rotate(-45deg);
  left: 20px;
}
.heart::after {
  transform: rotate(45deg);
  right: 20px;
}

CSS渐变与阴影
通过linear-gradient和box-shadow实现立体感：

.sun {
  width: 50px;
  height: 50px;
  background: radial-gradient(circle, #ffd700 30%, transparent 31%);
  box-shadow: 0 0 10px #ffd700;
  border-radius: 50%;
}

动画交互效果
添加transition或@keyframes使图标动态化：

.loading {
  width: 30px;
  height: 30px;
  border: 4px solid #dfe6e9;
  border-top: 4px solid #0984e3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

优化技巧

• 使用currentColor继承父元素文字颜色增强可维护性
• 通过transform: scale()调整图标大小而非修改宽高
• 对复杂图标考虑组合多个HTML元素简化CSS逻辑

资源参考

• CSS Tricks图标教程
• Animista动画库提供现成动画代码片段