如何创建网页工作的动画

Question

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

https://about.canva.com/

我所说的动画是页面上的"它拥有惊人设计所需的一切"部分。动画和图标高亮显示与右侧的动画同步。这怎么可能？？

提前谢谢。

Answer 1

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

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

动画有JS库，但是，自己缝合它将是一个很好的实践！

例如，如果我想切换div元素，我可以执行以下操作：

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

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

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

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