仅使用 CSS 创建动态旋转器入门使用此实现披萨人项目分解动画演示项目感谢您的阅读

2025-05-26

仅使用 CSS 创建动态旋转器

入门

动画分解

演示

使用此实现的项目

披萨人计划

感谢阅读

在这篇博客中，我们将创建封面图片中描绘的披萨旋转器。

入门

我们将使用下面的披萨片图像来生成整个披萨。

披萨片

HTML的外壳将是

<div class="spinner">
  <img src="<link to image>" class="pizza-part pizza-part-1" />
  <img src="<link to image>" class="pizza-part pizza-part-2" />
  <img src="<link to image>" class="pizza-part pizza-part-3" />
  <img src="<link to image>" class="pizza-part pizza-part-4" />
</div>
Enter fullscreen mode Exit fullscreen mode

动画分解

任何复杂的动画都可以分解成一系列简单的动画。让我们将动画分解成相应的组件：

  • 每片披萨都​​用来opacity营造淡入淡出的印象
  • 每片披萨也用于transform（rotate移动到所需位置以生成完整披萨的外观）和translate（生成从披萨上取下披萨片的动画）
  • 主容器围绕其中心旋转，使其看起来更加动感

旋转器的 CSS将是

.spinner {
  width: 160px;
  height: 160px;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  animation: spin 4s linear infinite;
}

.pizza-part {
  width: 80px;
  height: 80px;
}

.pizza-part-1 {
  animation: pizza1 2s ease-in-out infinite;
}

.pizza-part-2 {
  animation: pizza2 2s ease-in-out infinite;
}

.pizza-part-3 {
  animation: pizza4 2s ease-in-out infinite;
}

.pizza-part-4 {
  animation: pizza3 2s ease-in-out infinite;
}

/* animations */
@keyframes spin {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes pizza1 {
  0% {
    transform: translate(-20%, -20%);
    opacity: 0;
  }
  10% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  50% {
    transform: translate(0%, 0%);
    opacity: 1;
  }
  60% {
    transform: translate(-20%, -20%);
    opacity: 0;
  }
  100% {
    transform: translate(-20%, -20%);
    opacity: 0;
  }
}

@keyframes pizza2 {
  0% {
    transform: translate(20%, -20%) rotateZ(90deg);
    opacity: 0;
  }
  10% {
    transform: translate(20%, -20%) rotateZ(90deg);
    opacity: 0;
  }
  20% {
    transform: translate(0%, 0%) rotateZ(90deg);
    opacity: 1;
  }
  60% {
    transform: translate(0%, 0%) rotateZ(90deg);
    opacity: 1;
  }
  70% {
    transform: translate(20%, -20%) rotateZ(90deg);
    opacity: 0;
  }
  100% {
    transform: translate(20%, -20%) rotateZ(90deg);
    opacity: 0;
  }
}

@keyframes pizza3 {
  0% {
    transform: translate(20%, 20%) rotateZ(180deg);
    opacity: 0;
  }
  20% {
    transform: translate(20%, 20%) rotateZ(180deg);
    opacity: 0;
  }
  30% {
    transform: translate(0%, 0%) rotateZ(180deg);
    opacity: 1;
  }
  70% {
    transform: translate(0%, 0%) rotateZ(180deg);
    opacity: 1;
  }
  80% {
    transform: translate(20%, 20%) rotateZ(180deg);
    opacity: 0;
  }
  100% {
    transform: translate(20%, 20%) rotateZ(180deg);
    opacity: 0;
  }
}

@keyframes pizza4 {
  0% {
    transform: translate(-20%, 20%) rotateZ(-90deg);
    opacity: 0;
  }
  30% {
    transform: translate(-20%, 20%) rotateZ(-90deg);
    opacity: 0;
  }
  40% {
    transform: translate(0%, 0%) rotateZ(-90deg);
    opacity: 1;
  }
  80% {
    transform: translate(0%, 0%) rotateZ(-90deg);
    opacity: 1;
  }
  90% {
    transform: translate(-20%, 20%) rotateZ(-90deg);
    opacity: 0;
  }
  100% {
    transform: translate(-20%, 20%) rotateZ(-90deg);
    opacity: 0;
  }
}
Enter fullscreen mode Exit fullscreen mode

演示

使用此实现的项目

披萨人

网络应用程序：http://pizza-man-61510.firebaseapp.com/

GitHub 徽标 ruppysuppy / Pizza-Man

🍕🛒 一个在线订购披萨的电子商务网站

披萨人计划

一个在线订购披萨的电子商务网站

演示

注意：演示中展示的功能并不详尽。演示中仅展示核心功能。

使用的工具

  1. React：创建单页应用程序
  2. React-Router：用于路由
  3. Redux：用于状态管理
  4. Firebase：作为数据库

Firebase 设置

您需要创建一个 Firebase 配置文件，将 Firebase 设置保存在/src/firebase/config.js以下路径中：

const firebaseConfig = {
    apiKey: "API-KEY",
    authDomain: "AUTH-DOMAIN.firebaseapp.com",
    databaseURL: "DATABASE-URL.firebaseio.com",
    projectId: "PROJECT-ID",
    storageBucket: "STORAGE-BUCKET.appspot.com",
    messagingSenderId: "MESSAGING-SENDER-ID",
    appId: "APP-ID",
    measurementId: "MEASUREMENT-ID",
};

export default firebaseConfig;
Enter fullscreen mode Exit fullscreen mode

数据需要按照以下格式存储：

[
    {
        name: "CATEGORY NAME",
        items: [
            {
                desc: "PIZZA DESCRIPTION",
                id: "ID",
                img: "IMAGE LINK",
                name
…
Enter fullscreen mode Exit fullscreen mode
在 GitHub 上查看

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

  1. 我是初学者，该如何学习前端 Web 开发？
    可以参考以下文章：

    1. 前端流行语
    2. 前端开发路线图
    3. 前端项目构想
    4. 从初学者过渡到中级前端开发人员

  2. 你能指导我吗？

    抱歉，我工作已经很忙了，没时间指导任何人。

文章来源：https://dev.to/ruppysuppy/create-dynamic-spinners-only-using-css-34dh
Devto 翻译
PREV
像专业人士一样从头开始创建 React App 步骤 0：安装 Node 1. 初始化项目 2. 安装依赖项 3. 配置 Babel 4. 配置 Webpack 5. HTML 主体 6. 创建 React App 7. 添加脚本 结论 感谢阅读
NEXT
使用 Husky、ESLint、Prettier 在 9 分钟内自动格式化 Git Commit 上的代码 感谢阅读