CSS 雨和闪电效果

为了生成雨和闪电效果，我们将使用允许 HTML 元素动画的 CSS 动画。

我们将使用@keyframes允许动画在特定时间从当前样式逐渐变为新样式，然后我们将使用 filter:hue-rotate() 来提供闪电效果。

方法：

• 在该部分中添加背景图像。
• 要生成雨效果，请使用 CSS 的section:before属性将雨的背景图像添加到同一部分。
• 我们将为名为 color-change 的闪电效果创建一个 10 秒和无限时间的动画。
• 要创建颜色变化动画，我们将使用 @keyframes 并使用属性filter:hue-rotate(deg)给出效果。
• 要再次创建下雨效果，我们将使用 @keyframes 属性并在一段时间内更改背景图像的位置。

例子：

输出：