[分享]css3实现洒水效果

CSS3实现洒水效果是很有趣的一种技巧，可以让页面变得更加生动。下面来介绍一下如何实现。

.splash {
  position: absolute;
  background-image: url("water.png");
  background-size: contain;
  animation-name: splash;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes splash {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
} 

首先，需要准备一张水滴的图片作为背景图案。在CSS中定义一个名称为 .splash 的类，设置它的 position 为 absolute，并设置其背景图案为 water.png，通过 background-size:contain 将背景图案缩小至合适大小。接着，在 .splash 中对动画进行定义，将 animation-name 设置为 splash，将 animation-duration 设置为 1s（即动画持续时间为1秒），并将 animation-iteration-count 设置为 infinite（即动画无限次循环）。

接下来，在CSS中通过 @keyframes 对动画进行详细定义。动画的开始时刻为 0%，将 .splash 的 opacity 设置为0（即透明），将其 transform 的 scale 缩小至0.5。在动画进行到一半的地方（50%），将 .splash 的 opacity 设置为1（即完全不透明），将其 transform 的 scale 放大至1。在动画结束的时刻（100%），将 .splash 的 opacity 再次设置为0，将其 transform 的 scale 再次缩小至0.5。

使用完以上的代码，就可以在网站上看到洒水的效果啦！