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