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

svg打造猫神动画特效

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