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

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

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