当前位置：首页 > CSS

css制作小喇叭

2026-04-01 20:04:51CSS

CSS制作小喇叭效果

通过CSS可以创建一个小喇叭图标，利用伪元素和边框属性实现喇叭的视觉效果。

HTML结构

css制作小喇叭

<div class="speaker"></div>

CSS样式

.speaker {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #333;
  position: relative;
}

.speaker::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 15px;
  background: #333;
  top: 30px;
  left: -5px;
}

.speaker::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #333;
  top: 45px;
  left: -10px;
}

动画效果增强

为小喇叭添加脉冲动画效果，使其更具动态感。

css制作小喇叭

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.speaker {
  animation: pulse 1s infinite;
}

响应式调整

通过媒体查询调整喇叭大小，适应不同屏幕尺寸。

@media (max-width: 768px) {
  .speaker {
    border-left-width: 10px;
    border-right-width: 10px;
    border-bottom-width: 20px;
  }

  .speaker::before {
    width: 8px;
    height: 12px;
    top: 20px;
  }

  .speaker::after {
    width: 16px;
    height: 16px;
    top: 32px;
  }
}

颜色自定义

使用CSS变量方便修改喇叭颜色主题。

:root {
  --speaker-color: #4285f4;
}

.speaker {
  border-bottom-color: var(--speaker-color);
}

.speaker::before,
.speaker::after {
  background: var(--speaker-color);
}

通过以上CSS代码可以创建一个简洁的喇叭图标，并添加动画效果和响应式支持。调整边框大小和颜色变量可进一步自定义外观。