svg实现水中捞月湖面月色波纹滤镜动画效果代码-html代码-BFW代码库

svg实现水中捞月湖面月色波纹滤镜动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现水中捞月湖面月色波纹滤镜动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

<style>
    body {
  background: linear-gradient(-35deg, #2aa4d5, #030633);
  min-height: 100vh;
}

div {
  width: 370px;
  height: 500px;
  overflow: hidden;
  box-shadow: 0 0 150px #031f40;
  margin: 1em auto;
  margin: calc(50vh - 250px) auto;
}

svg {
  background: #031f40;
  position: relative;
  left: -20px;
}
</style>
</head>

<body>

    <div>
        <svg width="400" height="500" viewBox="0 0 600 750">
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.01 .1"
        numOctaves="1" result="turbulence" seed="53"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="B"/>
  </filter>
<image id="blueMoon" xmlns:xlink=".........完整代码请登录后点击上方下载按钮下载查看