svg实现一个鲸鱼海鸟动画效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看