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