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"/>
		<animate attributeName="opacity" dur="2s" repeatCount="indefinite" calcMode="linear" begin="100ms"
			keyTimes="0;0.74;0.75;0.9;1"
			values="0;0;1;0;0"/>
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="8s" repeatCount="indefinite" />
	</ellipse>
	<ellipse id="morph1" rx="96" ry="96" 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;90;96"/>
		<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=".........完整代码请登录后点击上方下载按钮下载查看