svg实现圈圈水中倒影动画效果代码-html代码-BFW代码库

svg实现圈圈水中倒影动画效果代码

代码语言：html

所属分类：动画

代码描述：svg实现圈圈水中倒影动画效果代码

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

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

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


  
<style>
body,html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; 
}
body{
  background-color: #c6c8de;
  display: flex;
  justify-content: center;
  align-items: center; 
  background: linear-gradient(0deg, #c3abd1 0%, #c6c8de 33%);
}
#svg_refl{
  height: 100%;
}
</style>


  
  
</head>

<body >
  <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg" id="svg_refl">
<use href="#everything"> 
</use>
<g filter="url(#reflection)">
	<use href="#everything" transform="scale (1.1, -.33) translate(0 -512)" transform-origin="center" opacity="0.5"/>
</g>
<defs>
	<g id="everything">
		<use href="#wave" x="256" y="196"/>
		<use href="#morph1" x="256" y="196"/>
		<use hr.........完整代码请登录后点击上方下载按钮下载查看