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 #ff5722;
}

圆形通过border-radius: 50%实现：

.circle {
  width: 40px;
  height: 40px;
  background: #4caf50;
  border-radius: 50%;
}

组合形状创建复杂图标

通过伪元素和定位组合多个形状。例如创建心形图标：

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

使用CSS渐变和阴影

线性渐变可创建立体效果：

.sun {
  width: 30px;
  height: 30px;
  background: radial-gradient(circle, #ffeb3b 30%, transparent 31%),
              linear-gradient(0deg, #ffeb3b 10%, transparent 11%);
}

添加阴影增强层次感：

.cloud {
  box-shadow: 
    15px 15px 0 -6px white,
    -15px 15px 0 -6px white;
}

动画交互效果

通过@keyframes实现动态图标：

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

悬停效果：

.icon:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

响应式适配方案

使用vw单位保持比例：

.responsive-icon {
  width: 5vw;
  height: 5vw;
}

媒体查询调整细节：

@media (max-width: 600px) {
  .menu-icon {
    width: 24px;
    height: 18px;
  }
}

SVG与CSS结合

内联SVG配合CSS控制：

<svg class="svg-icon" viewBox="0 0 24 24">
  <path d="M12 2L4 12l8 10 8-10z"/>
</svg>

.svg-icon {
  fill: currentColor;
  width: 1em;
  height: 1em;
}

性能优化技巧

减少DOM节点：

/* 使用伪元素而非额外div */
.icon::before {
  content: "";
  display: block;
}

硬件加速：

.optimized {
  will-change: transform;
  transform: translateZ(0);
}