CSS 绘制旋转星球动画，不用 JS，五分钟搞定（Vue 篇）

2024-01-11 14:54:31

使用纯 CSS 在 Vue 中创建旋转星球动画

在前端开发领域，创造引人注目的视觉效果至关重要。本文将指导您使用纯 CSS 在 Vue.js 中制作一个令人惊叹的旋转星球动画，无需 JavaScript 即可实现。

前期准备

要开始，请确保您已安装 Vue.js，并备好文本编辑器。

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create vue-css-spinning-globe

创建组件

在 src 目录中，创建 SpinningGlobe.vue 组件：

<template>
  <div class="spinning-globe">
    <div class="globe"></div>
  </div>
</template>

<style>
.spinning-globe {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #000;
  position: relative;
}

.globe {
  width: 100%;
  height: 100%;
  background-image: url("./globe.png");
  background-size: cover;
  animation: spin 10s infinite linear;
}

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

使用组件

在 main.js 中，使用组件：

import { createApp } from "vue";
import SpinningGlobe from "./components/SpinningGlobe.vue";

const app = createApp({
  components: {
    SpinningGlobe,
  },
});

app.mount("#app");

运行项目

运行项目：

npm run serve

定制

您可以通过调整 CSS 来定制旋转效果：

更改 .spinning-globe 的宽度和高度以调整星球大小。
修改 .globe 中的 background-image 以使用不同的星球图像。
调整 animation-duration 以改变旋转速度。

常见问题解答

为什么我的星球不旋转？

确保动画名称（spin）与 @keyframes 声明中使用的名称匹配。
如何让星球旋转更平滑？

增加 animation-duration 以减慢旋转速度。
我可以使用 JavaScript 控制旋转吗？

当然可以！您可以使用 Vue.js 的 v-bind 和 v-model 指令将 JavaScript 事件绑定到动画。
如何向星球添加阴影？

在 .spinning-globe 中添加 box-shadow 属性以创建阴影。
我可以在移动设备上使用此效果吗？

是的，此效果在移动设备上兼容，因为 CSS 动画支持所有现代浏览器。