CSS 雨和闪电效果

在网页设计中，CSS 动画的应用越来越广泛，能够为网站增添生动多彩的效果。其中，雨和闪电效果是比较受欢迎的一个。本文将会介绍如何通过 CSS 实现雨和闪电效果，并为您提供代码片段。

雨效果

原理

CSS 雨效果的原理是利用 ::before 和 animation 属性，模拟出雨滴下落的效果。通过选择适合的形状、速度和动画周期，可以呈现出令人满意的效果。

代码

以下是一个实现雨效果的代码示例：

.rain {
  position: relative;
  overflow: hidden;
}
.rain::before {
  content: "";
  position: absolute;
  top: -150px;
  left: -50%;
  z-index: 1;
  width: 200%;
  height: 150px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
  animation: animateRain 1s linear infinite;
}
@keyframes animateRain {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(20vh) rotate(360deg);
  }
}

说明

以上代码主要作用是将一个 ::before 伪元素添加到 .rain 元素之前，利用 animation 属性，实现下雨过程。下面对代码进行逐项解释：

1、 position: relative 和 overflow: hidden 属性用来控制外部盒子的位置和标签框，保证雨滴不会溢出。

2、设置 ::before 元素的位置和大小，上移出现在 .rain 盒子的上面，并且缩小了宽度。

3、选择合适的背景色，建立一个白色透明度从 0% 到 100% 的线性渐变背景，以表达雨滴由近到远的视觉效果。

4、使用 animation 属性和 keyframes 规则，定义了雨滴下落过程中的状态和运动轨迹，实现真实的降雨效果。

闪电效果

原理

CSS 闪电效果的原理较为复杂，但由于细节处理的清新自然，呈现出来的效果十分惊艳。它主要包括几个部分：闪电、闪电光芒、电声，而其中关键就在于闪电是由多边形拼接而成。

代码

以下是一个实现闪电效果的代码示例：

.light {
  position: relative;
  width: 200px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.light .light-line {
  position: absolute;
  border: 3px solid transparent;
  border-left-color: #fff;
  border-right-color: #fff;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 0px;
  height: 120px;
  animation: animateLine 1s ease-in-out infinite;
}
.light .light-flares {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: animateFlares 1s ease-in-out infinite;
}
.light .light-sound {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  animation: animateSound 1s ease-in-out infinite;
}
@keyframes animateLine {
  0% {
    opacity: 0;
    height: 0px;
  }
  20% {
    opacity: 1;
    height: 50px;
  }
  100% {
    opacity: 0;
    height: 120px;
  }
}
@keyframes animateFlares {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animateSound {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  40% {
    transform: translateX(-50%) rotate(20deg);
  }
  100% {
    transform: translateX(-50%) rotate(0deg);
  }
}

说明

以上代码主要作用是通过创建伪元素、设置定位和大小，实现了产品中的闪电效果。对于动画效果的设置，通过 animation 属性实现，其中的 keyframes 规则又定义了必要的过渡动画。

具体解释如下：

1、主要是定义了一个 .light 盒子，其中设置了宽度和高度，外面加入一个隐藏不可见的 overflow: hidden。

2、再定义一个闪电 .light-line，用于实现闪电的效果。它是根据多变形平面拼接的方式实现的，通过设置绝对定位，位于 light 盒子的上层。然后使用 border 和 transform 属性来调整其在界面中的动态展示效果。

3、实现闪电光芒里面包含了多个圆等元素，使用伪元素实现。通过设置透明度渐变完成一个光芒的显示于隐藏。

4、闪电过程中由于产生的电声，使用第三个实现闪电声音，利用三角函数的原理以及 rotate 属性实现晃动的效果。

结语

本文介绍了如何利用 CSS 实现雨和闪电效果，并为您提供了相应的代码片段。当然，这些例子只是CSS动画的一个起点，您可以根据自己的实际情况进行调整，发挥创意、将您的网站变得更加生动。