如何使用 CSS 创建旋转圆盘效果？

Rotating Disc Effect 也称为 Overlapping Disc Effect 是一种错觉效果，可用于网站上的各种用途。它可以用于任何东西，从装载机贴纸到为用户创造幻觉。之所以称为重叠圆盘，是因为有许多重叠的圆盘围绕一个点旋转。

方法：方法是先创建所有的圆盘，然后使用关键帧和第 n 个子属性来旋转它们。

HTML 代码：在本节中，我们创建了一个包含 list-items(li) 的无序列表 (ul)。列表项的数量等于光盘的数量。

CSS 代码：对于 CSS，请按照给定的步骤操作。

• 首先是使用 border-radius 属性创建光盘。将边界半径设置为 50% 以创建一个完美的圆。
• 现在，使用带有标识符的动画，稍后与关键帧一起使用。我们使用animate作为我们的标识符。
• 现在，使用关键帧为每一帧旋转圆盘。在这里，我们对第一帧使用了 0deg，对第二帧使用了 359deg。
• 现在，使用第 n 个子属性对每个光盘应用第 1 个延迟。它有助于以一定的延迟旋转每个圆盘，从而产生幻觉效果。

提示：您可以对每张光盘应用不同的不透明度颜色，使其看起来更具吸引力。

完整代码：是以上两段代码的组合。

输出：