css+svg实现植物生长繁星点点装饰文字效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+svg实现植物生长繁星点点装饰文字效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
:root
{
--dust-color: rgb(255,165,0);
--dust-glow-color: rgb(255,192,203);
--logo-color: rgb(255,255,255);
--logo-glow-color: rgba(255,165,0,.4);
--bg-color1: rgb(0,0,0);
--bg-color2: rgb(40,10,10);
}
*
{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body
{
    overflow: hidden;

    width: 100vw;
    height: 100vh;

            background: var(--bg-color2);
            background: radial-gradient(circle, var(--bg-color2) 0%, var(--bg-color1) 100%);

    -webkit-background: radial-gradient(circle, var(--bg-color2) 0%, var(--bg-color1) 100%);
       -moz-background: radial-gradient(circle, var(--bg-color2) 0%, var(--bg-color1) 100%);
         -o-background: radial-gradient(circle, var(--bg-color2) 0%, var(--bg-color1) 100%);
}
section
{
    display: flex;

    width: 100%;
    height: 100%;

    justify-content: center;
    align-items: center;
}

/* rules */
.leafs,
.buds,
#bee-left,
#bee2-left,
#bee-right,
#bee2-right
{
    visibility: hidden;

    stroke: none !important;
    fill: var(--logo-color) !important;
}

/* logo */
#typo
{
    z-index: 2;

    width: 100%;
    height: 100%;
    margin: 0 1% !important;

    animation: font-animate 1.15s .5s linear forwards;

    opacity: 0;

    fill: var(--logo-color);
    stroke: var(--logo-color);
    stroke-width: 2;
            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(-3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(-3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}
#plant-left,
#plant-right
{
    z-index: 1;

    width: 100%;
    height: 100%;

    fill: none;
    stroke: var(--logo-color);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(-3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(-3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}
#plant-left
{
    margin-left: 5% !important;

    -webkit-transform: rotate(-35deg) scaleX(-1); /* ✎✗ mirror rotation */
       -moz-transform: rotate(-35deg) scaleX(-1);
        -ms-transform: rotate(-35deg) scaleX(-1);
         -o-transform: rotate(-35deg) scaleX(-1);
            transform: rotate(-35deg) scaleX(-1); 
}
#plant-right
{
    margin-right: 5% !important;

    -webkit-transform: rotate(35deg);
       -moz-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
         -o-transform: rotate(35deg);
            transform: rotate(35deg);
}

/* bees */
#bee-left
{
    z-index: 3;

    -webkit-animation: fly-left 9s 4.7s ease-in-out infinite;
       -moz-animation: fly-left 9s 4.7s ease-in-out infinite;
        -ms-animation: fly-left 9s 4.7s ease-in-out infinite;
         -o-animation: fly-left 9s 4.7s ease-in-out infinite;
            animation: fly-left 9s 4.7s ease-in-out infinite;

            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}
#bee2-left
{
    z-index: 3;

    -webkit-animation: fly2-left 9s 4.8s ease-in-out infinite;
       -moz-animation: fly2-left 9s 4.8s ease-in-out infinite;
        -ms-animation: fly2-left 9s 4.8s ease-in-out infinite;
         -o-animation: fly2-left 9s 4.8s ease-in-out infinite;
            animation: fly2-left 9s 4.8s ease-in-out infinite;

            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}
#bee-right
{
    z-index: 3;

    -webkit-animation: fly-right 9s 5s linear infinite;
       -moz-animation: fly-right 9s 5s linear infinite;
        -ms-animation: fly-right 9s 5s linear infinite;
         -o-animation: fly-right 9s 5s linear infinite;
            animation: fly-right 9s 5s linear infinite;

            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}
#bee2-right
{
    z-index: 3;

    -webkit-animation: fly2-right 9s 4.5s ease-in-out infinite;
       -moz-animation: fly2-right 9s 4.5s ease-in-out infinite;
        -ms-animation: fly2-right 9s 4.5s ease-in-out infinite;
         -o-animation: fly2-right 9s 4.5s ease-in-out infinite;
            animation: fly2-right 9s 4.5s ease-in-out infinite;

            filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
    -webkit-filter: drop-shadow(3px 0px 7px var(--logo-glow-color))
    drop-shadow(0px 4px 7px var(--logo-glow-color));
}

/* wings */
.right-wing,
.right-wing2
{
    -webkit-transform-origin: 0 90%;
            transform-origin: 0 90%;
    -webkit-animation: flapping-right .1s linear infinite;
       -moz-animation: flapping-right .1s linear infinite;
        -ms-animation: flapping-right .1s linear infinite;
         -o-animation: flapping-right .1s linear infinite;
            animation: flapping-right .1s linear infinite;

    transform-box: fill-box;
}
.left-wing,
.left-wing2
{
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    -webkit-animation: flapping-left .1s linear infinite;
       -moz-animation: flapping-left .1s linear infinite;
        -ms-animation: flapping-left .1s linear infinite;
         -o-animation: flapping-left .1s linear infinite;
            animation: flapping-left .1s linear infinite;

    transform-box: fill-box;
}

/* stems */
.stem1
{
    visibility: hidden;

    animation: stretch 4s 1s ease-in-out forwards;

    stroke-dasharray: 200%;
}
.stem2
{
    visibility: hidden;

    animation: stretch-secondary 4s 2.35s ease-in-out forwards;

    stroke-dasharray: 200%;
}
.stem3
{
    visibility: hidden;

    animation: stretch-secondary 4s 2.8s ease-in-out forwards;

    stroke-dasharray: 200%;
}
.stem4
{
    visibility: hidden;

    animation: stretch-secondary 4s 1.8s ease-in-out forwards;

    stroke-dasharray: 200%;
}

/* leafs */
.leaf1,
.leaf2
{
    animation: bloom 1s 1.8s linear forwards;
}
.leaf3,
.leaf4
{
    animation: bloom 1s 2.35s linear forwards;
}
.leaf5,
.leaf6
{
    animation: bloom 1s 2.8s linear forwards;
}

/* buds */
.bud1
{
    -webkit-transform-origin: 40% 20%;
            transform-origin: 40% 20%;
    animation: popping .5s 3.2s cubic-bezier(1,0,0,1) forwards;

    transform-box: fill-box;
}
.bud2
{
    -webkit-transform-origin: 80% 80%;
            transform-origin: 80% 80%;
    animation: popping .5s 3.9s cubic-bezier(1,0,0,1) forwards;

    transform-box: fill-box;
}
.bud3
{
    -webkit-transform-origin: 60% 20%;
            transform-origin: 60% 20%;
    animation: popping .5s 4.2s cubic-bezier(1,0,0,1) forwards;

    transform-box: fill-box;
}
.bud4
{
    -webkit-transform-origin: 15% 35%;
            transform-origin: 15% 35%;
    animation: popping .5s 3.5s cubic-bezier(1,0,0,1) forwards;

    transform-box: fill-box;
}


/* flowers */
.flower1
{
    visibility: hidden;

    animation: bloom 1s 4s linear forwards;

    stroke-width: 5 !important;
    stroke-dasharray: 200%;
}
.flower2
{
    visibility: hidden;

    animation: bloom 1s 4.4s linear forwards;

    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}
.flower3
{
    visibility: hidden;

    animation: bloom 1s 4.7s linear forwards;

    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}
.flower4
{
    visibility: hidden;

    animation: bloom 1s 3.7s linear forwards;

    stroke-dasharray: 200%;
    stroke-width: 5 !important;
}

/* dust */
article#dust-wrap
{
    z-index: -1;

    animation: dust-on 3s 4.5s linear forwards;

    opacity: 0;
}
div
{
    position: absolute;

    display: block;
    visibility: hidden;

    border-radius: 50%;
    background: var(--dust-color);

            filter: contrast(150%) saturate(200%) /* brightness(150%) */
    drop-shadow(0 0 5px var(--dust-glow-color))
    drop-shadow(0 0 10px var(--dust-glow-color));
    -webkit-filter: contrast(150%) saturate(200%) /* brightness(150%) */
    drop-shadow(0 0 5px var(--dust-glow-color))
    drop-shadow(0 0 10px var(--dust-glow-color));
    flex: none !important;
}
div.dust1:nth-of-type(1)
{
    top: 10%;
    left: 30%;

    width: 1.1vmin;
    height: 1.1vmin;

    animation: dust-opacity3 10s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(2)
{
    top: 43%;
    left: 40%;

    width: .8vmin;
    height: .8vmin;

    animation: dust-opacity2 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(3)
{
    top: 15%;
    left: 35%;

    width: .8vmin;
    height: .8vmin;

    animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(4)
{
    top: 13%;
    left: 40%;

    width: 1.2vmin;
    height: 1.2vmin;

    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(5)
{
    top: 32%;
    left: 32%;

    width: 1.2vmin;
    height: 1.2vmin;

    animation: dust-opacity1 8s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(6)
{
    top: 22%;
    left: 70%;

    width: 1.2vmin;
    height: 1.2vmin;

    animation: dust-opacity2 10s .5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(7)
{
    top: 28%;
    left: 74%;

    width: .8vmin;
    height: .8vmin;

    animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(8)
{
    top: 24%;
    left: 75%;

    width: 1.1vmin;
    height: 1.1vmin;

    animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(9)
{
    top: 15%;
    left: 115%;

    width: 1.1vmin;
    height: 1.1vmin;

    animation: dust-opacity2 8s  1.5s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(10)
{
    top: 10%;
    left: 110%;

    width: 1.2vmin;
    height: 1.2vmin;

    animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(11)
{
    top: 15%;
    left: 105%;

    width: 1.1vmin;
    height: 1.1vmin;

    animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(12)
{
    top: 5%;
    left: 5%;

    width: 1vmin;
    height: 1vmin;

    animation: dust-opacity3 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(13)
{
    top: 8%;
    left: 10%;

    width: .8vmin;
    height: .8vmin;

    animation: dust-opacity3 8s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(14)
{
    top: 35%;
    left: 110%;

    width: 1.1vmin;
    height: 1.1vmin;

    animation: dust-opacity1 8s 1.5s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(15)
{
    top: 30%;
    left: 107%;

    width: 1.1vmin;
  .........完整代码请登录后点击上方下载按钮下载查看