当前位置：首页 > CSS

css3图标制作

2026-01-08 17:17:48CSS

CSS3 图标制作方法

使用 CSS3 制作图标是一种轻量级且灵活的方式，无需依赖图片资源。以下是几种常见的方法：

使用伪元素和边框

通过 ::before 和 ::after 伪元素结合边框属性可以创建简单的几何形状图标，如箭头、三角形等。

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
}

使用 transform 和旋转

通过 transform 属性可以实现旋转、缩放等效果，适合制作复杂图标。

.cross {
  width: 20px;
  height: 2px;
  background: #000;
  transform: rotate(45deg);
}
.cross::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: #000;
  transform: rotate(-90deg);
}

使用 box-shadow

box-shadow 可以创建多个阴影效果，适合制作多部分组合的图标。

.menu-icon {
  width: 20px;
  height: 2px;
  background: #000;
  box-shadow: 0 6px 0 #000, 0 -6px 0 #000;
}

使用 SVG 和 CSS

结合内联 SVG 和 CSS 可以创建更复杂的矢量图标，同时保持可定制性。

<div class="svg-icon">
  <svg viewBox="0 0 24 24">
    <path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3z" fill="currentColor"/>
  </svg>
</div>

.svg-icon {
  width: 24px;
  height: 24px;
  color: #000;
}

使用 CSS 动画

为图标添加动画效果可以增强交互体验。

css3图标制作

.spinner {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  border-top-color: #000;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}