时间戳

首页 > 解决方案 > 如何为网站创建这个 CSS/SVG 动画？

javascript - 如何为网站创建这个 CSS/SVG 动画？

问题描述

我的任务是为一个新网站（使用 Vue.js 和 SASS w/Bourbon）做一些 UX 工作，这与https://stripe.com/connect在这里所做的非常相似：

在此处输入图像描述

所以问题是这是怎么做到的？我需要使用哪些技术？它只是 SVG 和 CSS 吗？如果是这样，那么 SVG 是如何操作的，我需要设计师制作什么样的 SVG，我需要使用什么样的 CSS 属性来操作这些元素？

一个单独的（但相关的）问题是，我怎样才能实现他们在这里的流动性和性能？互动起来真是丝般顺滑！

标签： javascriptcssperformanceanimationsvg

解决方案

我这样做的方法是创建一个包含任何和所有想象、部分、图标等的 SVG 文件。即使它们重叠，您也需要，并将它们设置为不透明度为零，以便您保留默认值用户将首先看到的版本。

  1. 确保您正确命名所有 SVG 元素，并且使用易于记忆的名称，并根据它们的动画方式对它们进行分组。将任何将被动画化的东西组合在一起。

  2. 将要设置动画的元素设置为不透明度为零。

  3. 复制 SVG 代码并将其直接粘贴到 HTML 文件中。
  4. 使用 CSS 定位每个 ID 并为它们提供所需的动画。

这只是一个例子：

.first svg {
    #Tool {
      visibility: hidden;
    }
    #Tool-ON {
      @include transition(ease-in 0.5s);
      opacity: 1;
    }
  }

如果 HTML 元素具有.first适当的类，则 SVG 将根据类中的属性进行更改。相当简单，但是有了这个基本概念，您可以根据用户输入制作非常酷的图像动画。

推荐阅读