当前位置：首页 > CSS

css车窗制作

2026-04-01 12:18:41CSS

CSS车窗制作方法

使用CSS制作车窗效果可以通过边框、阴影和渐变等属性模拟玻璃的透明感和反光效果。以下是几种实现方式：

透明边框与内阴影

通过透明边框和box-shadow的inset属性模拟车窗玻璃的厚度和反光：

.window {
  width: 200px;
  height: 100px;
  border: 10px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 50%);
}

动态雨滴效果

css车窗制作

结合伪元素和动画模拟雨天车窗的雨滴：

.window-rain {
  position: relative;
  overflow: hidden;
  /* 基础样式同前 */
}
.window-rain::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, rgba(255,255,255,0.2));
  animation: rain 3s linear infinite;
}
@keyframes rain {
  0% { top: -100%; }
  100% { top: 100%; }
}

3D透视效果

css车窗制作

通过transform和多重阴影增强立体感：

.window-3d {
  transform-style: preserve-3d;
  transform: rotateY(10deg);
  box-shadow: 
    0 0 10px rgba(0, 0, 255, 0.2),
    inset 0 0 30px rgba(255, 255, 255, 0.4);
}

实际应用示例

将上述效果整合到汽车UI中：

<div class="car">
  <div class="window driver-side"></div>
  <div class="window passenger-side"></div>
</div>

.car {
  position: relative;
  width: 300px;
  height: 150px;
  background: #333;
  border-radius: 20px;
}
.window {
  position: absolute;
  top: 20%;
  width: 25%;
  height: 50%;
  border: 8px solid rgba(200, 220, 255, 0.25);
}
.driver-side { left: 10%; }
.passenger-side { right: 10%; }

关键点：