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="#snowflake${i}" dur="${dur}ms" begin="-${randInt(0,100)/10}s" repeatCount="indefinite">
            <mpath xlink:href="#motionPath${randInt(1, 2)}" />
          </animateMotion>`;
            // animated circle splashes
            if (c.splashes) {
              if (randInt(0,1) == 1) {
              let randTiming = -randInt(0, 10) / 10;
              rainsplashes += `<ellipse stroke="rgba(240, 240, 255, ${randInt(1,4)/10})" stroke-width="1" fill="none" cx="${randInt(0, ww)}" cy="${randInt(hh, hh/1.2)}" rx="5" ry="3">
              <animate
                 attributeType="XML" attributeName="stroke-width"
                 dur="1s" values="0; 0.7; 0"
                 repeatCount="indefinite" begin="${randTiming}" />
     .........完整代码请登录后点击上方下载按钮下载查看