当前位置：首页 > CSS

css制作跑车特效

2026-02-12 15:35:33CSS

使用CSS动画制作跑车特效

通过CSS的transform和animation属性可以创建跑车移动的视觉效果。关键点在于控制跑车的位移和倾斜角度。

.car {
  width: 200px;
  height: 100px;
  background-color: red;
  position: absolute;
  animation: drive 5s infinite;
}

@keyframes drive {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(500px) rotate(5deg);
  }
  100% {
    transform: translateX(1000px) rotate(0deg);
  }
}

添加3D透视效果

使用CSS 3D变换让跑车更具立体感，通过perspective和rotateY属性实现转向效果。

.road {
  perspective: 500px;
}

.car {
  transform-style: preserve-3d;
  animation: drive3d 8s infinite;
}

@keyframes drive3d {
  20% {
    transform: translateX(200px) rotateY(0deg);
  }
  40% {
    transform: translateX(400px) rotateY(15deg);
  }
  60% {
    transform: translateX(600px) rotateY(0deg);
  }
  80% {
    transform: translateX(800px) rotateY(-15deg);
  }
}

制作车轮旋转动画

为跑车添加动态旋转的车轮效果，使用border-radius创建圆形车轮并通过animation实现旋转。

.wheel {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  animation: spin 1s linear infinite;
}

.front-wheel {
  top: 60px;
  left: 150px;
}

.back-wheel {
  top: 60px;
  left: 10px;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

添加运动模糊效果

使用CSS滤镜的blur()函数创建速度感，通过动画动态调整模糊程度。

.car {
  filter: blur(0px);
  animation: blur-effect 5s infinite;
}

@keyframes blur-effect {
  0%, 100% {
    filter: blur(0px);
  }
  50% {
    filter: blur(2px);
  }
}

完整HTML结构示例

将上述CSS效果整合到完整HTML结构中，创建可运行的跑车动画。

css制作跑车特效

<!DOCTYPE html>
<html>
<head>
<style>
  .road {
    width: 1000px;
    height: 200px;
    background: #555;
    position: relative;
    overflow: hidden;
    perspective: 500px;
  }

  .car {
    width: 200px;
    height: 80px;
    background: red;
    position: absolute;
    top: 60px;
    transform-style: preserve-3d;
    animation: drive 5s infinite;
  }

  .wheel {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: black;
    position: absolute;
    animation: spin 1s linear infinite;
  }

  .front-wheel { left: 150px; }
  .back-wheel { left: 10px; }

  @keyframes drive {
    0% { transform: translateX(0) rotateY(0deg); }
    50% { transform: translateX(500px) rotateY(15deg); }
    100% { transform: translateX(1000px) rotateY(0deg); }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>
</head>
<body>
  <div class="road">
    <div class="car">
      <div class="wheel front-wheel"></div>
      <div class="wheel back-wheel"></div>
    </div>
  </div>
</body>
</html>