svg打造猫神动画特效-html代码-BFW代码库

代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>The Cat God</title>
    <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.min.css">
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100vw;
            background: no-repeat 50%/cover url("http://repo.bfw.wiki/bfwrepo/image/catgodbg.jpeg");
            display: flex;
            justify-content: center;
            align-items: center;
        }
        svg {
            display: block;
        }
        .svgWrap {
            border-radius: 3vw;
            box-shadow: 0px 0px 5vw 2.4vw rgba(247,179,194,0.25),
            3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
            0px 5vw 3vw -3vw rgba(216,157,170,0.9),
            inset 0px 0px 5vw 2.4vw rgba(247,179,194,0.3),
            inset 3vw 3vw 4.8vw 1.4vw rgba(247,179,194,0.35),
            inset 0px 5vw 2.7vw -3vw rgba(216,157,170,1);
        }
        .credits {
            position: fixed;
            bottom: 0;
            right: 0;
            font-size: 14px;
        }
        p {
            text-align: right;
            margin: 2px;
            color: #D4394F;
        }
        a {
            color: #040E41;
        }


    </style>
    <script>
        window.console = window.console || function(t) {};
    </script>
    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>
</head>
<body translate="no">
    <div class="svgWrap">
        <svg version="1.1" id="cat-god" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40vw" height="30.4vw" viewBox="0 0 172.9 131.4" style="enable-background:new 0 0 172.9 131.4;" xml:space="preserve">
            <style type="text/css">
                .st0 {
                    fill: #E9E4EA;
                }
                .st1 {
                    fill: #040E41;
                }
                .st2 {
                    fill: #EDE8E2;
                }
                .st3 {
                    fill: #FDD64A;
                }
                .st4 {
                    fill: #221714;
                }
                .st5 {
                    fill: #060001;
                }
                .st6 {
                    fill: #D4394F;
                }
                .st7 {
                    fill: #D43855;
                }
                .st8 {
                    fill: #F7B3C2;
                }
                .st9 {
                    fill: #ED71A3;
                }
                .st10 {
                    fill: #CFCAE2;
                }
                .st11 {
                    fill: #ffffff;
                }

            </style>
            <defs>
                <filter id="goo" color-interpolation-filters="sRGB">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
                    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 17 -10" result="cm" />
                </filter>

                <filter id="breath" x="-50%" y="-50%" width="200%" height="200%">
                    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence" />
                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="5" xChannelSelector="R" yChannelSelector="G" />
                </filter>
                <circle id="bubbleL1" class="st1" cx="122.8" cy="55" r="4" />
                <circle id="bubbleL2" class="st1" cx="141.9" cy="52" r="3.5" />
                <circle id="bubbleL3" class="st1" cx="161" cy="59" r="3.5" />
                <circle id="bubbleR1" class="st1" cx="50" cy="55" r="4" />
                <circle id="bubbleR2" class="st1" cx="31" cy="52" r="3.5" />
                <circle id="bubbleR3" class="st1" cx="12" cy="59" r="3.5" />

                <circle id="breathL" opacity="0.2" class="st11" cx="95" cy="90" r="3.5" />
                <circle id="breathR" opacity="0.2" class="st11" cx=76 cy="90" r="3" />
                <path id="eyeSKin-l-close" class="st4" d="M34.5,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
                    C44.6,61.4,39.5,57.6,34.5,57.6z" />
                <path id="eyeSKin-r-close" class="st4" d="M138.8,57.6c-4.5,0-9.9,3.7-10,10c0,6.2,5.4,9.2,10,9.2c5.3,0,10.1-2.6,10-9.2
                    C148.9,61.4,143.7,57.6,138.8,57.6z" />
            </defs>
            <path id="bg" class="st0" d="M162.1,131.4H10.8c-6,0-10.8-4.8-10.8-10.8V10.8C0,4.8,4.8,0,10.8,0h151.2c6,0,10.8,4.8,10.8,10.8
                v109.8C172.9,126.6,168,131.4,162.1,131.4z" />
            <path id="ec-r" class="st1" d="M150.7,55.7c-4.2-1-6-6.4-3.5-10.1c0.6-0.9-6.5,2.3-9.8,5.2c-2.3,2-5,2.8-7.2,1.4
                c-2.3-1.5-1.8-3.9-1.5-6.2c0.2-1.7,0.5-3.4,0.7-5.1c-0.8-0.1-1.4,0-1.9,0.4c0,0-16.7,13.9-9.5,40.5c0.7,2.7,1.8,5.4,4.2,7.2
                c-1.4-5.6,2.4-6.9,6.4-6.4c2.6,0.3,5.1,0.6,7.7,0.8c7.2,0.4,13.4-2.1,17.9-7.8c3.8-4.8,6.6-10.4,10-15.5c2.4-3.5,5-6.8,7.6-10
                c0.3-0.4,0.7-0.8,1.1-1.2v-1.4c-3.4,2.1-6.9,4.3-10.3,6.4C158.9,56.1,154.8,56.7,150.7,55.7z" />
            <path id="ec-l" class="st1" d="M0.9,49.9c2.6,3.3,5.3,6.6,7.6,10c3.4,5.1,6.2,10.7,10,15.5c4.5,5.7,10.7,8.2,17.9,7.8
                c2.6-0.1,5.1-0.4,7.7-0.8c3.9-0.5,7.8,0.8,6.4,6.4c2.4-1.8,3.4-4.5,4.2-7.2c7.2-26.6-9.5-40.5-9.5-40.5c-0.4-0.4-1.1-0.4-1.9-0.4
                c0.2,1.7,0.5,3.4,0.7,5.1c0.3,2.3,0.8,4.7-1.5,6.2c-2.1,1.4-4.8,0.6-7.2-1.4c-3.4-2.9-10.4-6.1-9.8-5.2c2.5,3.7,0.7,9.1-3.5,10.1
                c-4.2,1-8.2,0.4-11.9-2C6.7,51.6,3.4,49.5,0,47.5V49C0.3,49.3,0.6,49.6,0.9,49.9z" />
            <g id="eye-r">
                <ellipse transform="matrix(0.9871 -0.1602 0.1602 0.9871 -9.0334 23.1013)" class="st2" cx="138.8" cy="67.6" rx="12.4" ry="12.4" />
                <g>
                    <path class="st3" d="M138.8,76.7c-5,0-9.2-4.1-9.2-9.2c0-5,4.1-9.2,9.2-9.2c5,0,9.2,4.1,9.2,9.2C147.9,72.6,143.8,76.7,138.8,76.7
                        z" />
                    <g>
                        <path class="st4" d="M138.8,59.9c4.3,0,7.7,3.5,7.7,7.7s-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7S134.5,59.9,138.8,59.9
                            M138.8,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6C149.4,61.7,144.6,57,138.8,57L138.8,57
                            z" />
                    </g>
                </g>
                <g id="eye-r-0">
                    <path class="st5" d="M135.8,67.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9c0-1.6-1.3-2.9-2.9-2.9
                        C137.2,64.7,135.8,66,135.8,67.6z" />
                    <path class="st4" d="M138.8,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C142.2,69.5,140.6,71,138.8,71z
                        M138.8,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C141.2,66.2,140.1,65.1,138.8,65.1z" />
                </g>
            </g>
            <path class="st6" d="M99.1,34.3c-0.7,0.8-1,1.2-1.4,1.6c-3.9,4.1-5.4,8.8-4.4,14.4c0.5,2.6,0.9,5.2,1.1,7.9c0.1,1.4-0.2,2.8-0.7,4.1
                c-1.2,3.1-4.1,3.6-6.4,1.1c-0.3-0.3-0.5-0.6-0.9-1.1c-0.9,2.2-2.5,3-4.6,2.5c-2.1-0.5-3.2-2.1-3.4-4.1c-0.1-2,0-4,0.3-5.9
                c0.5-3.8,1-7.7-0.4-11.4c-0.7-1.9-1.9-3.6-3-5.4c-0.5-0.8-1.1-1.5-1.7-2.2c0.2-0.2,0.3-0.3,0.5-0.5c1.2,1.2,2.5,2.3,3.5,3.7
                c3,4.3,3.9,9,2.9,14.2c-0.3,1.6-0.5,3.3-0.8,4.9c0,0.2-0.1,0.5-0.1,0.7c0,2.1,1,3.8,2.4,4.1c1.5,0.2,2.2-0.6,2.6-1.8
                c0.7-2.3,0-4-2-4.8c-0.2-0.1-0.4-0.2-0.7-0.4c2.2-0.7,3.2,0.1,4.3,3.6c0.8-2.1,1.4-3.9,3.6-4c-0.7,1.3-1.5,2.5-1.9,3.8
                c-0.5,1.5,0.8,3.2,2.2,3.5c1.4,0.3,2.5-0.6,2.8-2.5c0.2-1.1,0.1-2.2,0-3.3c-0.4-2.8-0.7-5.6-1.3-8.4C90.7,44.1,94.4,36.3,99.1,34.3z
                " />
            <path id="eb-l-2" class="st3" d="M21.9,44.9c0-0.1-0.1-0.3-0.1-0.4c0,0,0,0,0-0.1c-1.5-3.2,0.4-5.5,4.6-4c1.4,0.5,2.4,0.8,3.1,1.1
                c0.3,0.1,0.7,0.2,1,0.4c1.1,0.5,2,1.2,2.9,2c0,0,0,0,0,0c2.7,2.1,7.6,2.8,7.3-0.2c0,0,0,0,0,0c-0.2-1.2-0.3-2.4-0.4-3.5
                c-0.5-9.3-5.2-15.6-13.6-19.4c-4.8-2.2-12.1-0.2-15.8,3.9c-3,3.3-3.8,7.5-4.2,11.7C6.1,43,8.7,49.7,15.1,52c4.1,1.5,7.4-0.5,7.4-4.8
                C22.5,46.4,22.1,45.6,21.9,44.9z" />
            <g id="eye-dot-l">
                <path id="eye-dot-l-2" class="st6" d="M27.7,27.3c0,1.3-1.1,2.4-2.4,2.4c-1.3,0-2.4-1.1-2.4-2.4c0-1.3,1.1-2.4,2.4-2.4
                    C26.7,24.9,27.7,26,27.7,27.3z" />
                <path id="eye-dot-l-5" class="st6" d="M34.2,34.9c0,1.4-1.1,2.5-2.5,2.5c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5
                    C33.1,32.4,34.2,33.5,34.2,34.9z" />
                <circle id="eye-dot-l-1" class="st6" cx="13.7" cy="30.6" r="2.5" />
                <path id="eye-dot-l-3" class="st6" d="M23,34.3c0,1.2-0.9,2.1-2.1,2.1c-1.2,0-2.1-0.9-2.1-2.1c0-1.2,0.9-2.1,2.1-2.1
                    C22.1,32.2,23,33.1,23,34.3z" />
                <circle id="eye-dot-l-4" class="st6" cx="13.7" cy="42.3" r="2.5" />
            </g>
            <path id="eb-r-2" class="st3" d="M165.9,36.4c-0.4-4.2-1.1-8.4-4.2-11.7c-3.7-4.1-11-6.1-15.8-3.9c-8.4,3.8-13.1,10-13.6,19.4
                c-0.1,1.2-0.2,2.3-0.4,3.5c0,0,0,0,0,0c-0.3,3,4.6,2.3,7.3,0.2c0,0,0,0,0,0c0.9-0.8,1.8-1.5,2.9-2c0.3-0.1,0.7-0.3,1-0.4
                c0.8-0.3,1.7-0.6,3.1-1.1c4.1-1.5,6,0.8,4.6,4c0,0,0,0,0,0.1c0,0.1,0,0.3-0.1,0.4c-0.3,0.8-0.7,1.5-0.7,2.3c0,4.4,3.3,6.3,7.4,4.8
                C164,49.7,166.5,43,165.9,36.4z" />
            <g id="eye-dot-r">
                <path id="eye-dot-r-2" class="st6" d="M144.9,27.3c0,1.3,1.1,2.4,2.4,2.4c1.3,0,2.4-1.1,2.4-2.4c0-1.3-1.1-2.4-2.4-2.4
                    C146,24.9,144.9,26,144.9,27.3z" />
                <path id="eye-dot-r-5" class="st6" d="M138.4,34.9c0,1.4,1.1,2.5,2.5,2.5c1.4,0,2.5-1.1,2.5-2.5c0-1.4-1.1-2.5-2.5-2.5
                    C139.6,32.4,138.4,33.5,138.4,34.9z" />
                <circle id="eye-dot-r-1" class="st6" cx="159" cy="30.6" r="2.5" />
                <path id="eye-dot-r-3" class="st6" d="M149.6,34.3c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1c0-1.2-0.9-2.1-2.1-2.1
                    C150.6,32.2,149.6,33.1,149.6,34.3z" />
                <circle id="eye-dot-r-4" class="st6" cx="159" cy="42.3" r="2.5" />
            </g>
            <g id="eye-l">
                <ellipse transform="matrix(0.2298 -0.9732 0.9732 0.2298 -39.2087 85.6189)" class="st2" cx="34.5" cy="67.6" rx="12.4" ry="12.4" />
                <g id="eyeBall-l">
                    <ellipse transform="matrix(0.7071 -0.7071 0.7071 0.7071 -37.6855 44.1805)" class="st3" cx="34.5" cy="67.6" rx="9.2" ry="9.2" />
                    <g>
                        <path class="st4" d="M34.5,59.9c4.3,0,7.7,3.5,7.7,7.7c0,4.3-3.5,7.7-7.7,7.7c-4.3,0-7.7-3.5-7.7-7.7
                            C26.8,63.3,30.2,59.9,34.5,59.9 M34.5,57c-5.9,0-10.6,4.7-10.6,10.6c0,5.9,4.7,10.6,10.6,10.6c5.9,0,10.6-4.7,10.6-10.6
                            C45.1,61.7,40.3,57,34.5,57L34.5,57z" />
                    </g>
                    <g id="eye-l-0">
                        <path class="st5" d="M37.4,67.6c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9c0-1.6,1.3-2.9,2.9-2.9C36.1,64.7,37.4,66,37.4,67.6
                            z" />
                        <path class="st4" d="M34.5,71c-1.9,0-3.4-1.5-3.4-3.4c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C37.9,69.5,36.4,71,34.5,71z
                            M34.5,65.1c-1.3,0-2.4,1.1-2.4,2.4c0,1.3,1.1,2.4,2.4,2.4s2.4-1.1,2.4-2.4C36.9,66.2,35.8,65.1,34.5,65.1z" />
                    </g>
                </g>
            </g>
            <g id="sun">
                <circle id="sun0" opacity=1 class="st7" cx="86.3".........完整代码请登录后点击上方下载按钮下载查看