惊艳！具有立体感的蓝牙耳机

效果演示

这段HTML与CSS代码创建了一个具有立体感的蓝牙耳机效果

HTML

<div class="card">
  <div class="lc cavity"></div>
  <div class="lc line"></div>
  <div class="led"></div>
  <div class="text">HUAWEI</div>
</div>

• card：这是整个卡片的容器。
• lc cavity：这个类名为cavity的div可能代表卡片上的一个凹陷或特殊区域。
• lc line：这个类名为line的div可能代表卡片上的一条线或分隔线。
• led：这个类名为led的div可能代表一个LED指示灯。
• text：这个类名为text的div包含文本“HUAWEI”。

CSS

.card {
  width: 270px;
  height: 220px;
  background-color: #e8e9eb;
  border-radius: 70px;
  box-shadow: inset 0px 35px 25px #ffffffe0, inset 10px 0px 25px #0000004b,
    inset 40px 0px 20px #ffffff, inset -10px 0px 25px #0000004b,
    inset -40px 0px 20px #fff, inset 0px 10px 10px #000000e0,
    inset 0px -15px 25px #00000036, 10px 25px 40px -10px #00000060;
  position: relative;
}

.card .line {
  width: 100%;
  height: 2px;
  background-color: #b4b2b2;
  margin-top: 30%;
  position: relative;
}
.line::after,
.line::before {
  content: "";
  position: absolute;
  width: 5%;
  height: 2px;
  background-color: #fff;
}
.line::before {
  right: 0;
}
.card .cavity {
  width: 150px;
  height: 20px;
  background: linear-gradient(180deg, #d6d6d6, #fff);
  border-radius: 200px;
  margin: auto;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, 30%);
}
.card .led {
  width: 7px;
  aspect-ratio: 1;
  background-color: #66f66f;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
  border-radius: 100px;
  box-shadow: 0 0 6px #3eff4b;
}
.card .text {
  text-align: center;
  margin-top: 70px;
  color: #00000036;
  font-weight: bolder;
}

• .card：定义卡片的样式。它设置了卡片的宽度、高度、背景颜色、边框圆角、阴影和位置。阴影使用了inset属性来创建卡片内部的阴影效果，使其看起来更有立体感。
• .card .line：定义线（line）的样式。它设置了线的高度、背景颜色和外边距。这个类还包含了两个伪元素::before和::after，它们用于在线条的两端添加白色的小节，可能是为了模拟某些设备上的指示灯或装饰。
• .card .cavity：定义凹陷（cavity）的样式。它设置了凹陷的宽度、高度、背景渐变、圆角和位置。这个元素被绝对定位在卡片的中心，并稍微向上偏移。
• .card .led：定义LED灯的样式。它设置了LED灯的宽度、高宽比、背景颜色、位置和圆角。LED灯也被绝对定位在卡片的中心，并稍微向上偏移。它还有一个绿色的背景和发光效果的阴影。
• .card .text：定义文本（text）的样式。它设置了文本的对齐方式、外边距和颜色。文本被设置为居中显示，并向上偏移了一定的距离，以避免与上面的元素重叠。