用 Vue 2 实现 QQ 空间中的漂浮千纸鹤效果

用 Vue 2 创建漂亮的漂浮千纸鹤效果

在茫茫网络世界中，千纸鹤元素无疑点缀着无数人的回忆。无论是 QQ 空间还是其他社交平台，它都曾以其优雅灵动的姿态惊艳着我们的目光。今天，让我们用 Vue 2 来重现这一经典效果，用代码赋予千纸鹤新的生命力。

构建千纸鹤组件

首先，我们创建一个名为 "Origami.vue" 的 Vue 组件，它将负责渲染千纸鹤的结构和动画。在这个组件中，我们定义了一个基本的千纸鹤形状，包括机身、翅膀和尾巴。

<template>
  <div class="origami">
    <div class="origami-body"></div>
    <div class="origami-wings"></div>
    <div class="origami-tail"></div>
  </div>
</template>

<script>
export default {
  name: 'Origami',
  data() {
    return {
      isHovered: false,
    };
  },
  methods: {
    handleMouseenter() {
      this.isHovered = true;
    },
    handleMouseleave() {
      this.isHovered = false;
    },
  },
};
</script>

<style>
.origami {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #fff;
  transform-origin: center center;
  animation: origami-float 3s infinite alternate;
}

.origami-body {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  background-color: #000;
  transform: translate(-50%, -50%);
}

.origami-wings {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 50px;
  background-color: #fff;
  transform: rotate(45deg);
}

.origami-tail {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #fff;
  transform: translate(-50%, 0);
}

@keyframes origami-float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}
</style>

整合组件到应用程序

接下来，我们将这个 "Origami" 组件添加到我们的 Vue 应用程序中，让它响应鼠标悬停事件。在 "App.vue" 文件中，我们在 <template> 部分添加如下代码：

<Origami v-bind:isHovered="isHovered" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"></Origami>

添加全局样式

为了让千纸鹤正确对齐，我们在 "main.js" 文件中添加一些全局样式：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

运行应用程序

现在，我们可以启动应用程序并欣赏漂浮千纸鹤的效果了：

1. 运行 npm run serve。
2. 访问 "http://localhost:8080"。

常见问题解答

1. 如何更改千纸鹤的颜色？

修改 "Origami.vue" 文件中的 .origami 类的 background-color 属性。

2. 如何调整千纸鹤的大小？

修改 "Origami.vue" 文件中的 .origami 类的 width 和 height 属性。

3. 如何使千纸鹤移动得更快或更慢？

修改 "Origami.vue" 文件中的 @keyframes origami-float 中的动画持续时间。

4. 如何添加额外的动画？

在 "Origami.vue" 文件中添加新的 @keyframes 规则并将其应用到 .origami 类上。

5. 如何让千纸鹤在屏幕上跟随鼠标？

使用 CSS position: fixed 属性将 .origami 类定位为绝对位置，然后使用 JavaScript 响应鼠标移动事件来更新其 top 和 left 样式。

结语

通过本文，我们使用 Vue 2 成功创建了一个漂浮千纸鹤的效果，重现了曾经风靡网络的经典元素。希望这篇教程能帮助你将你的项目提升到一个新的高度。