使用 CSS 显示图像和发光

Question

我希望在 CSS/js 中做类似的事情

https://youtu.be/HLJldmEw3q8

我查看了像 gsap 这样的 javascript 动画框架，并试图弄清楚如何在使显示边缘发光的同时简单地显示图像，但我不知所措。我想我也可以使用相同的技术来显示发光的拱门。

任何关于我应该搜索什么或应该使用什么技术的帮助或指示都会有很大的帮助。我对这个领域完全陌生。

Answer 1

这实际上不是答案。这只是我的意见。

首先，我可以说，CSS/JS 世界中的动画是有史以来最难的部分之一，因为视觉效果和技术解决方案也是如此。

在相同的视觉效果下，我们可以有很多技术方案，有多种方式来做。但是你需要做很多事情才能实现。例如，您可以将图像分割成更小的部分，编写自定义 CSS，编写自定义 Javascript 代码来显示每个部分。这将需要几个小时甚至几天的时间来深入了解细节。除此之外，您需要了解浏览器对自定义 CSS 的支持。毕竟，在Javascript代码中计算位置、颜色等时，你应该更关心性能。

我完全没有提到其他的事情，比如你会把那个带有动画的组件放在哪里。例如，当您的页面只有该徽标时应该很容易。但是如果你想要黑暗模式，故事会变得复杂。然后，您需要将所有这些部分集成到React、Vue 或Angular。这是一个全新的故事。

我们来谈谈动画库。有这么多的图书馆也许可以帮助你，但也许。因为所有这些都应该支持非常基本的动画。对于视觉上没有清晰形状的更复杂的动画，您将返回编写自定义脚本。

回到您的问题，也许您需要编写自定义代码来执行以下操作：

• 从上到下显示您的图像。
• 之后，用发光画一个圆圈并计算正确的时间。
• 重复上述两个步骤数百次，直到您对行为感到满意为止。

再次强调，动画从来都不是一个简单的问题。