SOURCE

console 命令行工具 X clear

                    
>
console
var rainColor = '#0000ff';
var rainSVG = Snap("#rain");
var rainContainer = {
  width: 300,
  height: 400
};
var rain = [];
var rainCount = 100;
var rainLength = 50;
var rainSpeed = 0.3;

var splashColor = '#3333ff'
var splashSVG = Snap('#splash');
var splashContainer = {
  width: 380,
  height: 200
};
var splashes = [];
var splashBounce = 80;
var splashSpeed = 0.6;

for (var i = 0; i < rainCount; i++) {
  var line = rainSVG.line(0, 0, 0, rainLength).attr({
    fill: "none",
    stroke: rainColor,
    strokeWidth: Math.random() * 3,
  });

  rain.push(line);

  var points = [];
  var randomX = ((Math.random() * 80) - 40);
  points.push('M' + 0 + ',' + splashBounce);
  points.push('Q' + randomX + ',' + (0 - (Math.random() * splashBounce)));
  points.push((randomX * 2) + ',' + ((Math.random() * (splashContainer.height - splashBounce)) + splashBounce));

  var splash = splashSVG.path(points.join(',')).attr({
    fill: "none",
    stroke: splashColor,
    strokeWidth: 1
  });

  splashes.push(splash);
}

start();
document.onclick = start;

function animate(line, delay, index) {
  var x = Math.random() * rainContainer.width;
  var delay = delay || splashSpeed + Math.random() * rainSpeed;
  TweenMax.fromTo(line.node, rainSpeed, {
    y: -rainLength,
    x: x
  },
  {
    y: rainContainer.height - rainLength,
    delay: delay,
    ease: Linear.easeIn,
    onComplete: startSplash,
    onCompleteParams: [line, index]
  })

  var pathLength = Snap.path.getTotalLength(splashes[index]);
  splashes[index].node.style.strokeDasharray = 50 + ' ' + (pathLength);
  TweenMax.fromTo(splashes[index].node, splashSpeed, {
    strokeWidth: line.node.style.strokeWidth,
    x: 40 + x,
    opacity: 1,
    strokeDashoffset: 50
  },
  {
    strokeWidth: 0,
    strokeDashoffset: -pathLength,
    opacity: 1,
    delay: delay + rainSpeed,
    ease: SlowMo.ease.config(0.4, 0.1, false)
  })
}

function startSplash(line, index) {
  animate(line, null, index);
}

function start() {
  TweenMax.killAll();

  for (var i = 0; i < rain.length; i++) {
    animate(rain[i], Math.random() * 30, i);
  }
}
<div class="container">
  <div>
    <div id="card">
      <svg width="300" height="400" viewbox="0 0 300 400" id="rain">
      </svg>
    </div>
    <svg width="380" height="200" viewbox="0 0 380 200" id="splash">
    </svg>
  </div>
</div>





<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js">
</script>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #eee;
  background: linear-gradient(to left, #ddd, #eee);
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#card {
  background: #fff;
  box-shadow: 9px 7px 37px -6px rgba(0, 0, 0, 0.75);
  overflow: hidden;
  width: 320px;
  padding: 0 10px;
  height: 400px;
  margin: 10px 20px 0 20px;
}

#rain {
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;
}

#splash {
  //border: 1px solid red;
  margin-top: -80px;
}