svg+js实现下雨涟漪动画效果代码-html代码-BFW代码库

svg+js实现下雨涟漪动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现下雨涟漪动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body{
                background:#222;
        }
    </style>





</head>

<body>


    <script>
        function rain(el=document.body, params) {
          if (!el){
            console.error('Must have element to populate the rain!');
            return;
          }
          const defaultProperties = {
            colors: 'default',
            drop: window.innerHeight,
            fadeout: true,
            raindrops: 400,
            speed: 2000,
            splashes: true,
            spread: window.innerWidth
          };
        
          // properties passed in from user onto the defaults
          const c = Object.assign(defaultProperties, params);
          
          const randInt = (min, max) => {
            return Math.floor(Math.random() * (max - min + 1)) + min;
          };
          let hh = window.innerHeight;
          let ww = window.innerWidth;
          let raindrops = '';
          let rainsplashes = '';
          if (!c.flakes || Number.isNaN(c.flakes * 1)){
            c.flakes = 250;
          }
          for (let i = 0; i < c.flakes; i++) {
            let dur = c.speed;
            raindrops += `<g transform="translate(${randInt(0,ww)} -26) scale(1.${randInt(0, 3)})">
            <rect id="snowflake${i}" fill="rgba(240, 240, 255, ${randInt(1,10)/10})" x="0" y="0" rx="1" height="${randInt(4,10)}" width="${randInt(3,5)/10}" filter="url(#blur${randInt(1, 2)})">
            </rect>
          </g>
          <animateMotion xlink:href="#snow.........完整代码请登录后点击上方下载按钮下载查看