svg实现泳池水流动画效果
代码语言：html
所属分类：动画
代码描述：svg实现泳池水流动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body, html {
height: 100%;
margin: 0;
}
body {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
svg {
width: 100%;
max-height: 100%;
visibility: hidden;
}
</style>
</head>
<body translate="no">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<defs>
<filter id="shadowGoo" width="300%" height="300%" x="-100%" y="-100%" color-interpolation-filters="sRGB">
<feGaussianBlur class="blurValue" in="SourceGraphic" stdDeviation="2.5" result="blur"></feGaussianBlur>
<feColorMatrix class="matrix" in="blur" mode="matrix" values="1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,23,-7"></feColorMatrix>
</filter>
<clipPath id="poolMask">
<rect x="13.124" width="773.752" height="600" />
</clipPath>
<clipPath id="tubeInnerShadowClip">
<ellipse cx="401.013" cy="287.8" rx="92.126" ry="92.14" />
</clipPath>
<linearGradient id="sunGrad" gradientUnits="userSpaceOnUse" x1="13.124" y1="300" x2="786.2491" y2="300">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.15" />
<stop offset="0.14" style="stop-color:#FFFFFF;stop-opacity:0.35" />
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
</linearGradient>
<radialGradient id="sunGrad2" cx="-744.4753" cy="530.2743" r="414.8502" gradientTransform="matrix(0 0.9537 -1 0 585.0505 744.7258)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.25" />
<stop offset="0.0489" style="stop-color:#FFFFFF;stop-opacity:0.2378" />
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0" />
</radialGradient>
<filter id="waterReflect">
<feTurbulence type="fractalNoise" baseFrequency="0.005 0.015" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
<filter id="stringFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.005 0.015" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="12" in="SourceGraphic" in2="warp" />
</filter>
</defs>
<g clip-path="url(#poolMask)">
<g id="pool">
<rect x="13.124" fill="#81DFE5" width="773.752" height="600" />
<rect x="73.124" y="61.37" fill="#44A6B9" width="60.013" height="57.388" />
<rect x="676.752" y="480.486" fill="#44A6B9" width="58.156" height="58.156" />
<rect x="673.23" y="61.033" fill="#44A6B9" width="57.523" height="58.167" />
<rect x="75.538" y="481.274" fill="#44A6B9" width="59.414" height="59.414" />
<path class="horizontalRippleMedium" fill="none" stroke="#65D6DE" stroke-width="12.6938" stroke-miterlimit="10" d="
M-786.876,120.164L-786.876,120.164c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6c17.939,1.119,35.931,1.056,53.862-0.188
l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34
c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402
c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412
c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2
c18.503-1.269,37.071-1.28,55.575-0.033l4.847,0.327c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939
c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09h1h0c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6
c17.939,1.119,35.931,1.056,53.862-0.188l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39
c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309
c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442
c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35
c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2c18.503-1.269,37.07-1.28,55.575-0.033l4.847,0.327
c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09" />
<path class="horizontalRippleMedium" fill="none" stroke="#65D6DE" stroke-width="12.6938" stroke-miterlimit="10" d="
M-786.876,180.164L-786.876,180.164c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6c17.939,1.119,35.931,1.056,53.862-0.188
l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34
c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402
c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412
c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2
c18.503-1.269,37.071-1.28,55.575-0.033l4.847,0.327c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939
c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09h1l0,0c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6
c17.939,1.119,35.931,1.056,53.862-0.188l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39
c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309
c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442
c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35
c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2c18.503-1.269,37.07-1.28,55.575-0.033l4.847,0.327
c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09" />
<path class="horizontalRippleMedium" fill="none" stroke="#65D6DE" stroke-width="12.6938" stroke-miterlimit="10" d="
M-786.876,240.167L-786.876,240.167c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6c17.939,1.119,35.931,1.056,53.862-0.188
l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34
c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402
c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412
c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2
c18.503-1.269,37.071-1.28,55.575-0.033l4.847,0.327c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939
c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09h1h0c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6
c17.939,1.119,35.931,1.056,53.862-0.188l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39
c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309
c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442
c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35
c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2c18.503-1.269,37.07-1.28,55.575-0.033l4.847,0.327
c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09" />
<path class="horizontalRippleMedium" fill="none" stroke="#65D6DE" stroke-width="12.6938" stroke-miterlimit="10" d="
M-786.876,300.171L-786.876,300.171c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6c17.939,1.119,35.931,1.056,53.862-0.188
l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34
c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402
c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412
c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2
c18.503-1.269,37.071-1.28,55.575-0.033l4.847,0.327c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939
c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09h1h0c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6
c17.939,1.119,35.931,1.056,53.862-0.188l3.092-0.215c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39
c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309
c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442
c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35
c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2c18.503-1.269,37.07-1.28,55.575-0.033l4.847,0.327
c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939c14.37-0.911,28.777-1.063,43.163-0.457l25.879,1.09" />
<path class="horizontalRippleMedium" fill="none" stroke="#65D6DE" stroke-width="12.6938" stroke-miterlimit="10" d="
M-786.876,480.164L-786.876,480.164c18.357-1.332,36.783-1.425,55.153-0.28l9.617,0.6c17.939,1.119,35.931,1.056,53.862-0.188
l3.092-0.214c18.406-1.277,36.878-1.309,55.289-0.097l5.919,0.39c18.088,1.191,36.234,1.181,54.321-0.031l5.076-0.34
c18.292-1.226,36.646-1.222,54.937,0.011l4.582,0.309c18.189,1.226,36.439,1.236,54.629,0.031l6.065-0.402
c17.984-1.191,36.028-1.195,54.013-0.01l6.715,0.442c17.985,1.185,36.028,1.181,54.013-0.01l6.222-0.412
c18.086-1.198,36.232-1.195,54.317,0.01l5.254,0.35c18.401,1.226,36.864,1.208,55.263-0.054l2.924-0.2
c18.503-1.269,37.071-1.28,55.575-0.033l4.847,0.327c17.8,1.199,35.658,1.235,53.463,0.107l14.812-0.939
c14.37-0.911,28.777-1.063,43.163-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0