如何创建网页工作的动画

Question

我很想知道如何制作类似于下面提供的链接的网络应用程序运行动画：

https://about.canva.com/

我正在谈论的动画是页面上的“它拥有惊人设计所需的一切”部分。动画和图标与右侧的动画同步突出显示。这怎么可能？？

提前致谢。

Answer 1

我认为您可以通过使用 CSS transition 和 opacity 属性来实现这一点。

使用 JavaScript 更改 HTML 元素（例如，div）的位置和不透明度。

有动画的 JS 库，但是，自己拼接是个好习惯！

例如，如果我想切换div 元素，我可以这样做：

function toggle() {
    document.getElementById('div01').style.left = '100px';
    document.getElementById('div01').style.opacity = 0;
}

如果transition 的div01 '0.1s'，则opacity 和position 将更改0.1s。

您可以像您的示例一样将许多其他元素放入 div 元素中，然后通过隐藏顶部 div 元素将它们隐藏在一个元素中。

这里是小提琴：https://jsfiddle.net/yfuLb9d0/2/。