svg+css实现母亲节快乐动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：svg+css实现母亲节快乐动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
<style>
body {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    background: #edc3ff;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    letter-spacing: .25em
}

div {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

div::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50vh;
    background: #1f0038;
    top: 95%
}

.hair {
    fill: #1f0038
}

.hair-main {
    animation: hair-flow .75s infinite alternate ease-in-out
}

@keyframes hair-flow {
    from {
        d: path("M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306")
    }

    to {
        d: path("M600 198c-3.5 5.2-9.3 10.7-15.7 10.2c-14.6 3.2-25.4-19.6-48.8-18.8c-6.5 1.2-9.3 6.2-12.5 11.1c-7.6 11.9-22.1 5.5-35.7-10.9c-9.7-16.6-16.9-20.5-25.8-12.8a37.5 47.5 0 0 1 -21.7 3.3c-12.2-4.6.7-29-16.3-39.3c-17-11.4-23.8 10.6-38.3 6s-5.6-20.7-1.2-35.7c2.8-18.8-6.3-26.4-18.6-24.3s-20.8-20.9-20.8-22.9l-4.3-9.7a46.1 46.1 0 0 0-17.2-16.3a36.5 36.5 0 0 0-19.1 -3.6a10 10 0 0 0-4.3.8a1 1 0 0 0-1.3.8v260h306")
    }
}

.leaf-2 {
    fill: #6fd489
}

.leaf-1 {
    fill: #9ae3ce
}

.leaf-4 {
    fill: #499e00
}

.leaf-3 {
    fill: #5ec16e
}

.text {
    fill: #f2f3f7;
    font-size: 10px
}

.face {
    fill: #f68fb6
}

.heart {
    fill: #ff4646;
    animation: myheart 1s infinite alternate
}

@keyframes myheart {
    from {
        transform: translate(0,0)
    }

    to {
        transform: translate(0,-15px)
    }
}

.flower-1 {
    fill: #8d0f69
}

.flower-2 {
    fill: #d15aad
}


</style>
    </head>
    <body>


        <div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
                <defs>
                    <g id="path-1">
                        <path d="M600 198c-3.5-5.2-9.3-10.7-15.7-12.2c-18.6-3.2-28.4 17.2-48.8 12.8c-5.7-1.3-9.3-6.2-12.5-11.1c-7.6-11.9-22.1-20.5-35.7-16.9c-9.7 2.6-16.9 10.5-25.8 14.8a37.5 37.5 0 0 1-21.7 3.3c-11.2-4.6.7-29-14.3-39.3c-17-11.4-23.8 10.6-40.3 7s-5.6-14.7-3.2-30.7c2.8-18.8-6.3-31.4-20.6-32.3s-17.8-17.9-17.8-17.9l-2.3-9.7a46.1 46.1 0 0 0-7.2-16.3a36.5 36.5 0 0 0-7.1-7.6a41.5 41.5 0 0 0-24.4-8.4a10 10 0 0 0-4.3.8v260h306z" class="hair hair-main"></path>
                    </g>
                    <g id="path-2">
                        <path d="M0 12s-12.8 3-13.9-12c0 0 14.2-1.8 13.9 12z" class="leaf-2"/>
                        <path d="M0 12s-12.8 3-13.9-12c0 0 3.9 2.9 7 5.6a71.5 71.5 0 0 1 6.9 6.4z" class="leaf-1"/>
                    </g>
                    <g id="path-3">
                        <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 6.8-9.4 14.8-1.5z" class="leaf-4"/>
                        <path d="M24 12s-5.3 9.3-14.8 1.5c0 0 3.8-.7 7.2-1a57.3 57.3 0 0 1 7.6-.5z" class="leaf-3"/>
                    </g>
                </defs>
                <use xlink:href="#path-1" x="0" y="0"/>
                <g transform="translate(300, 0) scale(-1, 1) translate(-300, 0)">
                    <use xlink:href="#path-1" x="0" y="0"/>
                </g>
                <g transform="translate(195, 233) scale(-1,1) translate(-195, -233)">
                    <g>
                        <use href="#path-2" x="195" y="235"/>
                        <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end"/>
                        <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="6,185, 233" dur=".75s" begin="anim1.end"/>
                    </g>
                </g>
                <g transform="translate(195, 233) scale(-1,-1) translate(-195, -233)">
                    <g>
                        <use href="#path-2" x="195" y="233"/>
                        <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,185, 233" to="-12,185, 233" dur=".75s" begin="0s;anim2.end"/>
                        <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,185, 233" to="2,185, 233" dur=".75s" begin="anim1.end"/>
                    </g>
                </g>
                <g>
                    <use href="#path-2" x="410" y="235"/>
                    <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="2,400, 235" to="-12,400, 235" dur=".75s" begin="0s;anim2.end"/>
                    <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 235" to="2,400, 235" dur=".75s" begin="anim1.end"/>
                </g>
                <g transform="translate(410, 233) scale(1,-1) translate(-410, -233)">
                    <g>
                        <use href="#path-2" x="410" y="233"/>
                        <animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="6,400, 233" to="-12,400, 233" dur=".75s" begin="0s;anim2.end"/>
                        <animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="-12,400, 233" to="6,400, 233" dur=".75s" begin="anim1.end"/>
                    </g>
                </g>
                <use xlink:href="#path-3" x="174" y="222"/>
                <use xlink:href="#path-3" x="398" y="222"/>
                <path class="text" fill-rule="evenodd" d="M350 227.5l.1.1.2.1a.4.4 0 0 1 .2 0 .4.4 0 0 0 .1 0 .9.9 0 0 0 .7 0l.2-.1.2-.1.2-.3a2.7 2.7 0 0 0 .6-.8 8.3 8.3 0 0 0 .4-1 13 13 0 0 0 .4-2.2v-.8a2.1 2.1 0 0 1 0-.6 1.3 1.3 0 0 0-.5-1.1 2 2 0 0 0-1.5-.2 1.1 1.1 0 0 0-.8.5.3.3 0 0 0-.1.1.2.2 0 0 1 0 .1.1.1 0 0 0 0 .2 5.5 5.5 0 0 0-.3 1.2l-.2 1.7v.8a3.6 3.6 0 0 1-.2.7 4 4 0 0 0 0 1 1.3 1.3 0 0 0 .2.4.7.7 0 0 0 0 .3z"/>
                <path class="text" fill-rule="evenodd" d="M385.8 233c-4.1-5.3-12.6-6.5-21.3 2-1.7-2.9-3-5.5-2.8-8a6.2 6.2 0 0 1 1.4-3.4c.7-.6 1.9 0 2.1 1.4.3 1.7 1.6 0 .9-1.8-1.4-3.2-11-4-10.4 4.3a4.7 4.7 0 0 0 .1.7l-1 3.3q-1 2.8-2.2 5.5-1.1 2.8-2.5 5.6c-.8 1.8-1.6 3.5-2.6 5.1a27.2 27.2 0 0 1-2.5 3.7c-.4.5-1.2 1.4-1.9 1.5-.2 0-.2-.6-.2-.7a15.4 15.4 0 0 1 .2-3l.8-4.2 1-4.6 1.1-4 .7-2.6v-.3l-.3-.2c-2.2-1-4.8-1.4-6.6-3 .4-3.3.8-8.1-.5-11.3-.8-1.8-2.2-3.4-4.3-3.4-3-.1-5.2 2.8-5.4 5.6-.4 4.8 3.8 8.7 7.6 11-1.3 4.8-4 16-9 17.4a4.1 4.1 0 0 1-1.4.2c-3-.2-3.5-9-3-11.5a6.7 6.7 0 0 0 2.5-1.5 10.3 10.3 0 0 0 3.5-5.7 4.6 4.6 0 0 0-1.4-4.2 5 5 0 0 0-5.8-.5c-2.9 1.5-4.3 4.9-5 7.9a20.5 20.5 0 0 0-.4 4.7 19.8 19.8 0 0 0 1.2 6.4 49.4 49.4 0 0 1-4 9.3 14.2 14.2 0 0 1-1.6 2.4c-.8.9-1.5 1-1.7-.2-.4-1.8 0-5 .2-7q.4-3.1 1.2-7c.3-3.4 1-7.5-.2-10.5-1.4-3.2-5-2.7-7-.2a20.8 20.8 0 0 0-2.7 4.4 40.4 40.4 0 0 0-2 5.3l-.8 3v-2.3c0-2.9.1-5.4.3-7.5l.4-4.8a25.3 25.3 0 0 0 10.5-4.8 35.6 35.6 0 0 0 8.3-9 1.3 1.3 0 0 1 .7.8 1.1 1.1 0 0 0 .5.9c1.8 1.2 6.7 0 5.4-3a3.6 3.6 0 0 0-.7-1 6.9 6.9 0 0 0-2.7-1.2l-1.1-.2a24.2 24.2 0 0 0 1-2.5 32.4 32.4 0 0 0 1.5-6 26.8 26.8 0 0 0 .3-5.8 20.8 20.8 0 0 0-.8-5 10 10 0 0 0-2-3.6 5.9 5.9 0 0 0-3.1-1.9 8.8 8.8 0 0 0-5.8.9 17.6 17.6 0 0 0-6.1 5.2 40.3 40.3 0 0 0-5.4 9.9 68.1 68.1 0 0 0-3.6 14l-7.3 2h-.7c.3-2.5.6-4.8.9-5.8.6-2.7-5.3-4.5-5.9-2.5a87 87 0 0 0-1.4 9.5c-5 .6-10.6.4-12.5-3.3a4.4 4.4 0 0 1-.5-2.1c.1-1-1-1-1.8-1-4.4.4-4 4-1.1 6.4 3.7 3.1 10 3 15.6 2.2l-.7 6.8c-.2 3-.3 6.2-.2 9.4a8.3 8.3 0 0 1-1.4.4 5.2 5.2 0 0 1-1 .........完整代码请登录后点击上方下载按钮下载查看