当前位置：首页 > VUE

vue实现跑车

2026-01-12 10:26:53VUE

Vue 实现跑车动画效果

在 Vue 中实现跑车动画效果，可以通过 CSS 动画和 Vue 的动态绑定功能结合完成。以下是一个完整的实现方案：

模板部分

<template>
  <div class="road">
    <div class="car" :style="{ left: carPosition + 'px' }"></div>
  </div>
</template>

脚本部分

vue实现跑车

<script>
export default {
  data() {
    return {
      carPosition: 0,
      animationId: null
    }
  },
  mounted() {
    this.animateCar()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  },
  methods: {
    animateCar() {
      const animate = () => {
        this.carPosition += 5
        if (this.carPosition > window.innerWidth) {
          this.carPosition = -100
        }
        this.animationId = requestAnimationFrame(animate)
      }
      animate()
    }
  }
}
</script>

样式部分

<style scoped>
.road {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #333;
  overflow: hidden;
}

.car {
  position: absolute;
  width: 100px;
  height: 50px;
  background-color: red;
  bottom: 0;
  border-radius: 10px;
}

.car::before,
.car::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #000;
  border-radius: 50%;
  bottom: -10px;
}

.car::before {
  left: 10px;
}

.car::after {
  right: 10px;
}
</style>

进阶实现：添加3D效果

要让跑车效果更逼真，可以添加3D透视和倾斜效果：

vue实现跑车

.car {
  transform: perspective(500px) rotateY(20deg);
  transition: transform 0.3s ease;
}

.car:hover {
  transform: perspective(500px) rotateY(0deg);
}

使用GSAP实现更流畅动画

安装GSAP库后可以实现更专业的动画效果：

import { gsap } from 'gsap'

methods: {
  animateCar() {
    gsap.to(this, {
      carPosition: window.innerWidth + 100,
      duration: 5,
      ease: "power1.inOut",
      onComplete: () => {
        this.carPosition = -100
        this.animateCar()
      }
    })
  }
}

添加环境元素

增强真实感可以添加道路标记和背景：

<div class="road-markings"></div>
<div class="scenery"></div>

.road-markings {
  position: absolute;
  width: 100%;
  height: 4px;
  background: repeating-linear-gradient(
    to right,
    white,
    white 20px,
    transparent 20px,
    transparent 40px
  );
  top: 50%;
}

.scenery {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
}

这些方法组合使用可以创建出从简单到复杂的跑车动画效果，根据项目需求选择适合的实现方式。