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

代码语言:html

所属分类:动画

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

代码标签: 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