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 href="#morph2" x="256" y="196"/>
                <use href="#morph3" x="256" y="196"/>
                <animateTransform attributeName="transform" attributeType="XML" type="translate" 
                dur="4s" repeatCount="indefinite" calcMode="spline"
                keyTimes="0;0.5;1"
                keySplines="0.7 0 0.3 1; 0.7 0 0.3 1"
                values="0 -16; 0 16; 0 -16"/>
        </g>

        <ellipse id="wave" stroke-width="12" stroke="#c3abd1">
                <animate attributeName="rx" dur="2s" repeatCount="indefinite" calcMode="spline" begin="100ms"
                        keyTimes="0;0.65;0.75;0.9;1"
                        keySplines="1 0 0.4 0.8; 0 0.7 1 1; 1 1 1 1; 1 1 1 1"
                        values="96;48;132;182;182"/>
                <animate attributeName="ry" dur="2s" repeatCount="indefinite" calcMode="spline" begin="100ms"
                        keyTimes="0;0.65;0.75;0.9;1"
                        keySplines="1 0 0.4 0.8; 0 0.7 1 1; 1 1 1 1; 1 1 1 1"
                        values="96;64;92;182;182".........完整代码请登录后点击上方下载按钮下载查看