svg实现一个鲸鱼海鸟动画效果代码
代码语言：html
所属分类：动画
代码描述：svg实现一个鲸鱼海鸟动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>
<style>
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;
}
}
</style>
</head>
<body>
<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>
<circle class="st1" cx="1049.03" cy="1050.5" r="773.06"></circle>
</g>
<radialGradient id="SVGID_1_" cx="1049.0287" cy="1050.4984" r="688.1226" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#C7FBFF"></stop>
<stop offset="0.37" style="stop-color:#C5FAFF"></stop>
<stop offset="0.5376" style="stop-color:#BEF9FF"></stop>
<stop offset="0.6642" style="stop-color:#B1F5FF"></stop>
<stop offset="0.7704" style="stop-color:#9FF0FF"></stop>
<stop offset="0.8637" style="stop-color:#87EAFF"></stop>
<stop offset="0.9466" style="stop-color:#6BE3FF"></stop>
<stop offset="1" style="stop-color:#54DDFF"></stop>
</radialGradient>
<circle class="st2" cx="1049.03" cy="1050.5" r="688.12"></circle>
<g>
<circle class="st3" cx="586" cy="552.3" r="70.86"></circle>
<circle class="st3" cx="1269.25" cy="1683.32" r="91"></circle>
<circle class="st3" cx="1462.53" cy="1703.45" r="19.81"></circle>
<circle class="st3" cx="1756.96" cy="1472.07" r="27.21"></circle>
<circle class="st3" cx="613.2" cy="300.6" r="27.21"></circle>
<circle class="st3" cx="1796.97" cy="738" r="19.81"></circle>
<circle class="st3" cx="432.67" cy="558.63" r="19.81"></circle>
<circle class="st3" cx="1602.34" cy="431.12" r="32.51"></circle>
<circle class="st3" cx="551.58" cy="1639.39" r="34.41"></circle>
<circle class="st3" cx="452.48" cy="1400.51" r="51.76"></circle>
<circle class="st3" cx="1408.31" cy="463.64" r="34.41"></circle>
<circle class="st3" cx="718.88" cy="1654" r="49.46"></circle>
<circle class="st3" cx="1602.34" cy="648.31" r="89.69"></circle>
</g>
</g>
<g id="Whale">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="606.72" y1="1059.0825" x2="1003.0895" y2="1524.8945" gradientTransform="matrix(0.9447 -0.3279 0.3279 0.9447 -369.811 268.693)">
<stop offset="0" style="stop-color:#04B2D9"></stop>
<stop offset="1" style="stop-color:#04B2D9;stop-opacity:0.1"></stop>
</linearGradient>
<path class="st4" d="M967.81,1430.49c-4.85,3.81-9.74,7.45-14.62,10.85c-25.89,18.04-64.13,17.15-87.79-3.72
c-95.75-84.43-124.77-179.93-136.18-268.17c52.05,19.66,51.66,80.07,67.17,15.13c15.27-63.95-48.28-88.12-73.77-129.81
c-0.71-46.32-0.86-88.1-8.91-122.15c-8.03-33.96-78.71-97.77-117.42-96.98c-51.36,1.05-127.31,62.6-134.74,131.74
c-4.67,43.47-0.71,100.76,12.34,161.6c-19.57,39.77-49.19,79.11-23.22,131.66c31.12,62.99,20.56,6.58,52.65-37.77
c47.34,111.59,167.14,197.87,352.85,243.71c57.83,14.28,63.52,50.36,90.94,103.25c6.19,11.93,27.17,21.61,31.09,12.32
c6.99-16.58-0.72-57.99,34.31-96.38c0,0-17.37-22.33,40.11-60.69C1095.93,1396.17,1014.55,1393.82,967.81,1430.49z"></path>
<g class="st5">
<path class="st6" d="M914.86,1487.66c15.41,17.76,50.58,92.45,57.87,78.83c5.54-10.36-9.04-60.65,18.05-81.15
c0,0-8.12-31.39,29.41-56.43c28.29-18.88-27.29-2.6-58.58,20.34c-19.16,14.05-30.71,18.06-43.66,20.7
C899.58,1473.69,908.95,1480.84,914.86,1487.66z"></path>
<path class="st7" d="M494.47,1080.21c12.23,54.55-52.78,90.98-29.01,159.46c16.16,46.56,7.66-28.54,56.67-62.2
C598.84,1124.8,494.47,1080.21,494.47,1080.21z"></path>
<path class="st7" d="M716.84,1046.85c7.27,49.87,73.74,59.62,75.76,124.94c1.38,44.41-15.64-21.57-67.74-34.13
C643.31,1118,716.84,1046.85,716.84,1046.85z"></path>
</g>
<g>
<path class="st7" d="M834.38,1407.42c-4.62-5.7-7.19-9.43-7.19-9.43C830.03,1401.35,832.41,1404.49,834.38,1407.42
c8.75,10.8-0.29-0.61-17.81-21.91c-137-166.54-82.14-337.19-106.45-440.04c-7.46-31.55-73.12-90.82-109.08-90.09
c-47.71,0.97-113.38,73.76-115.61,113.84c-6.48,116.4,49.58,353.11,246.18,458.84c21.99,11.82,45.64,20.33,70.23,24.65
C848.72,1460.95,891.7,1468.88,834.38,1407.42z"></path>
</g>
<g>
<path class="st8" d="M808.01,1391.29c-4.01-5.28-6.26-8.73-6.26-8.73C804.22,1385.68,806.29,1388.59,808.01,1391.29
c7.6,10.01-0.26-0.56-15.46-20.3c-118.91-154.37-77.83-307.17-100.95-400.84c-7.09-28.74-63.52-84.14-93.5-84.47
c-39.79-0.44-92.58,63.57-93.34,99.76c-2.2,105.08,51.1,320.67,218.07,421.69c18.67,11.3,38.65,19.64,59.28,24.22
C821.46,1440.09,857.54,1448.45,808.01,1391.29z"></path>
</g>
<path class="st8" d="M589.45,899.02c-90.12,12.4-34.38,247.13,14.37,249.09C652.57,1150.07,679.57,886.62,589.45,899.02z"></path>
<path class="st9" d="M590.36,909.73c-48.53,6.68-18.52,133.08,7.74,134.14S638.88,903.05,590.36,909.73z"></path>
<path class="st9" d="M603.15,1103.12c-13.35-2.84,11.26,84.86,19.06,89.47C630.02,1197.2,616.5,1105.96,603.15,1103.12z"></path>
</g>
<g id="Bubbles">
<circle class="st10" cx="752.69" cy="420.02" r="92.82"></circle>
<circle class="st10" cx="991.58" cy="1715.31" r="92.82"></circle>
<circle class="st10" cx="1737.15" cy="1192.42" r="92.82"></circle>
<circle class="st10" cx="975.65" cy="453.12" r="41.8"></circle>
<circle class="st10" cx="710.22" cy="593.8" r="20.57"></circle>
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0