当前位置：首页 > CSS

icon制作css

2026-01-28 02:05:10CSS

使用CSS制作图标

通过CSS可以创建矢量图标，利用边框、伪元素和变换等属性实现简单到复杂的图形效果。以下是几种常见方法：

基础形状制作

利用width、height、border和border-radius属性创建基本图形：

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3498db;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #e74c3c;
}

伪元素组合

通过::before和::after伪元素叠加创建复杂图标：

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

CSS变换技巧

使用transform属性实现旋转、缩放等效果：

.menu-icon {
  width: 30px;
  height: 4px;
  background: #333;
  position: relative;
}
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 4px;
  background: #333;
}
.menu-icon::before {
  top: -10px;
}
.menu-icon::after {
  bottom: -10px;
}

SVG与CSS结合

虽然纯CSS可实现图标，但复杂图形建议使用内联SVG配合CSS样式：

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

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

动画图标

添加CSS动画使图标具有交互性：

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