SVG生日蛋糕动画

下载代码

html

css

js

分享到微信朋友圈

X

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<svg version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 50 425 475" style="enable-background:new 0 50 425 475;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
    .smoke{
        stroke-dasharray: 1 5 4 7 2 6;
        stroke-dashoffset: 0;
        animation: burn 7s linear infinite reverse;
    }

@keyframes burn {
100%{ stroke-dashoffset: 65; }
}

.message {font: normal 32px 'Pacifico', cursive; fill: #ad0000;}
</style>
<text x="50%" y="215" class="message" text-anchor="middle">Stay safe &</text>
    <text x="50%" y="255" class="message" text-anchor="middle">place your holiday</text>
    <text x="50%" y="295" class="message" text-anchor="middle">message here</text>
    
<g class="candle">
    <rect x="78" y="175" class="st0 stick" width="44" height="225"/>
    <line class="st1 veke" x1="100" y1="175" x2="100" y2="160"/>
    <path class="st1 smoke" d="M100,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
    <g>
        <path class="st0 fire" d="M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z">
            <animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z;M100,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C117.5,129.1,100,127.5,100,105z;M100,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
            s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C117.5,126.6,110,125,100,115z;M100,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C117.5,129.1,100,127.5,100,105z;M100,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C117.5,125.4,100,110,100,110z"/>
        </path>
    </g>
</g>

<g class="candle">
    <rect x="153" y="175" class="st0 stick" width="44" height="225"/>
    <line class="st1 veke" x1="175" y1="175" x2="175" y2="160"/>
    <path class="st1 smoke" d="M175,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
    <g>
        <path class="st0 fire" d="M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
        s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z">
        <animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z;M175,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C192.5,129.1,175,127.5,175,105z;M175,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
            s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C192.5,126.6,185,125,175,115z;M175,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C192.5,129.1,175,127.5,175,105z;M175,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C192.5,125.4,175,110,175,110z"/>
        </path>
    </g>
</g>

<g class="candle">
    <rect x="228" y="175" class="st0 stick" width="44" height="225"/>
    <line class="st1 veke" x1="250" y1="175" x2="250" y2="160"/>
    <path class="st1 smoke" d="M250,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
    <g>
        <path class="st0 fire" d="M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
        s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z">
        <animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z;M250,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C267.5,129.1,250,127.5,250,105z;M250,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
            s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C267.5,126.6,260,125,250,115z;M250,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C267.5,129.1,250,127.5,250,105z;M250,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C267.5,125.4,250,110,250,110z"/>
            </path>
    </g>
</g>

<g class="candle">
    <rect x="303" y="175" class="st0 stick" width="44" height="225"/>
    <line class="st1 veke" x1="325" y1="175" x2="325" y2="160"/>
    <path class="st1 smoke smoke2" d="M325,152.5c0,0-2.5-7.5,5-7.5c5,0-2.5,0,5,0c5,0,5-7.5,0-7.5s-7.5,0-12.5,0s-5-7.5,0-7.5c7.5,0,7.5-7.5,7.5-7.5 "/>
    <g>
        <path class="st0 fire" d="M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z">
            <animate dur="500ms" repeatCount="indefinite" attributeName="d" values="M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z;M325,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C342.5,129.1,325,127.5,325,105z;M325,115c0,20-20,16.6-20,32.5c0,12.3,7.2,16.5,13.8,20.6c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-10,7.5-10
            s7.5,4.5,7.5,10c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-13.3,11.3-25.6C342.5,126.6,335,125,325,115z;M325,105c-12.5,7.5-20,24.1-20,40c0,12.3,7.2,19,13.8,23.1c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,0.9-17.5,5-17.5
            s10,12,10,17.5c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-10.8,11.3-23.1C342.5,129.1,325,127.5,325,105z;M325,110c0,0-17.5,15.4-17.5,31.2c0,12.3,4.7,22.8,11.3,26.9c-0.8-1.6-1.3-3.5-1.3-5.6c0-5.5,3.4-15,7.5-15
            s7.5,9.5,7.5,15c0,2.1-0.5,4-1.3,5.6c6.6-4.1,11.3-14.6,11.3-26.9C342.5,125.4,325,110,325,110z"/>
            </path>
    </g>
</g>
<g>
    <circle class="st0" cx="47.5" cy="372.5" r="12.5"/>
    <circle class="st0" cx="72.9" cy="372.5" r="12.5"/>
    <circle class="st0" cx="98.3" cy="372.5" r="12.5"/>
    <circle class="st0" cx="123.7" cy="372.5" r="12.5"/>
    <circle class="st0" cx="149" cy="372.5" r="12.5"/>
    <circle class="st0" cx="174.4" cy="372.5" r="12.5"/>
    <circle class="st0" cx="199.8" cy="372.5" r="12.5"/>
    <circle class="st0" cx="225.2" cy="372.5" r="12.5"/>
    <circle class="st0" cx="250.6" cy="372.5" r="12.5"/>
    <circle class="st0" cx="276" cy="372.5" r="12.5"/>
    <circle class="st0" cx="301.3" cy="372.5" r="12.5"/>
    <circle class="st0" cx="326.7" cy="372.5" r="12.5"/>
    <circle class="st0" cx="352.1" cy="372.5" r="12.5"/>
    <circle class="st0" cx="377.5" cy="372.5" r="12.5"/>
</g>
<polygon class="st0" points="387.5,425 37.5,425 25,372.5 400,372.5 "/>
</svg>

css

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg

<!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG生日蛋糕动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号