svg鲸鱼动画

下载代码

html

css

分享到微信朋友圈

html

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2100 2100" style="enable-background:new 0 0 2100 2100;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#6EE4FF;stroke-width:8.3698;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#CFF6FF;stroke-width:8.0878;stroke-miterlimit:10;}
	.st2{fill:url(#SVGID_1_);}
	.st3{fill:#6EE4FF;}
	.st4{fill:url(#SVGID_2_);}
	.st5{opacity:0.5;}
	.st6{fill:#C0FFFF;}
	.st7{fill:#6EECFF;}
	.st8{opacity:0.502;fill:#FFFFFF;}
	.st9{fill:#FFFFFF;}
	.st10{fill:none;stroke:#FFFFFF;stroke-width:7.9628;stroke-miterlimit:10;}
	.st11{fill:none;stroke:#FFFFFF;stroke-width:6.6357;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st12{fill:url(#SVGID_3_);}
	.st13{fill:#FFD99C;}
	.st14{fill:#FF598B;}
	.st15{opacity:0.502;}
	.st16{fill:#FF9442;}
	.st17{fill:none;stroke:#FFFFFF;stroke-width:5.3086;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st18{opacity:0.251;fill:#007D99;}
</style>
<g id="Background">
	<g>
		<circle class="st0" cx="1049.03" cy="1050.5" r="723.29"/>
		<circle class="st1" cx="1049.03" cy="1050.5" r="773.06"/>
	</g>
	<radialGradient id="SVGID_1_" cx="1049.0287" cy="1050.4984" r="688.1226" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#C7FBFF"/>
		<stop  offset="0.37" style="stop-color:#C5FAFF"/>
		<stop  offset="0.5376" style="stop-color:#BEF9FF"/>
		<stop  offset="0.6642" style="stop-color:#B1F5FF"/>
		<stop  offset="0.7704" style="stop-color:#9FF0FF"/>
		<stop  offset="0.8637" style="stop-color:#87EAFF"/>
		<stop  offset="0.9466" style="stop-color:#6BE3FF"/>
		<stop  offset="1" style="stop-color:#54DDFF"/>
	</radialGradient>
	<circle class="st2" cx="1049.03" cy="1050.5" r="688.12"/>
	<g>
		<circle class="st3" cx="586" cy="552.3" r="70.86"/>
		<circle class="st3" cx="1269.25" cy="1683.32" r="91"/>
		<circle class="st3" cx="1462.53" cy="1703.45" r="19.81"/>
		<circle class="st3" cx="1756.96" cy="1472.07" r="27.21"/>
		<circle class="st3" cx="613.2" cy="300.6" r="27.21"/>
		<circle class="st3" cx="1796.97" cy="738" r="19.81"/>
		<circle class="st3" cx="432.67" cy="558.63" r="19.81"/>
		<circle class="st3" cx="1602.34" cy="431.12" r="32.51"/>
		<circle class="st3" cx="551.58" cy="1639.39" r="34.41"/>
		<circle class="st3" cx="452.48" cy="1400.51" r="51.76"/>
		<circle class="st3" cx="1408.31" cy="463.64" r="34.41"/>
		<circle class="st3" cx="718.88" cy="1654" r="49.46"/>
		<circle class="st3" cx="1602.34" cy="648.31" r="89.69"/>
	</g>
</g>
<g id="Whale">

css

body, html {
  height: 100%;
  margin: 0;    background-color: #1f6bdc;
  background-image: radial-gradient(#2a7fff,#003b94);
}
svg {
  max-height: 100%;
}

#Donut{
	transform-origin: 1054.33px 1055.80px;
	animation-name: scale-float;
	animation-duration: 6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

#Whale{
	transform-origin: 1054.33px 1055.80px;
	animation-name: swim;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#Birds{
	transform-origin: 1368.75px 1379.027px;
	animation-name: flying;
	animation-duration: 10s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

#Ripple-01, #Ripple-02, #Ripple-03{
	transform-origin: 1054.33px 1055.80px;
	animation-name: ripple-scale;
	animation-duration: 6s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

#Ripple-02{
	animation-delay: 2s;
}

#Ripple-03{
	animation-delay: 4s;
}

@keyframes ripple-scale{
	0%{
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(3.2);
		opacity: 0;
	}
}

@keyframes scale-float{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1);
	}
}

@keyframes swim{
	0%{
		tramsform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

@keyframes flying{
	0%{
		transform: translate(0px, 0px);
		opacity: 0;
	}
	25%{
			transform: translate(-250px, -300px);
			opacity: 1;
		}
	50%{
			transform: translate(-500px, -600px);
			opacity: 0;
		}
	100%{
			transform: translate(0px, 0px);
			opacity: 0;
		}
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg