css+svg实现植物生长繁星点点装饰文字效果代码
代码语言：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;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(16)
{
top: 22%;
left: 137%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(17)
{
top: 32%;
left: 87%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(18)
{
top: 42%;
left: 127%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(19)
{
top: 37%;
left: 4%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(20)
{
top: 22%;
left: 190%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 10s .5s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(21)
{
top: 28%;
left: 179%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(22)
{
top: 42%;
left: 177%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(23)
{
top: 60%;
left: 30%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(24)
{
top: 93%;
left: 40%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(25)
{
top: 65%;
left: 15%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity1 10s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(26)
{
top: 63%;
left: 50%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(27)
{
top: 82%;
left: 32%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity2 8s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(28)
{
top: 70%;
left: 60%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity1 10s .5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(29)
{
top: 78%;
left: 74%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(30)
{
top: 74%;
left: 75%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity1 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(31)
{
top: 65%;
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(32)
{
top: 60%;
left: 100%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(33)
{
top: 75%;
left: 105%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity3 10s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(34)
{
top: 55%;
left: 5%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(35)
{
top: 68%;
left: 10%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity1 8s 1.5s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(36)
{
top: 95%;
left: 110%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 8s 1.5s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(37)
{
top: 80%;
left: 107%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(38)
{
top: 72%;
left: 147%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(39)
{
top: 82%;
left: 87%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity3 8s 1s infinite, dust-move 50s linear infinite;
}
div.dust1:nth-of-type(40)
{
top: 92%;
left: 127%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(41)
{
top: 87%;
left: 11%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity3 8s 1s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(42)
{
top: 72%;
left: 180%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 10s .5S infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(43)
{
top: 78%;
left: 179%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 8s infinite, dust-move 40s linear infinite;
}
div.dust1:nth-of-type(44)
{
top: 82%;
left: 167%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move 50s linear infinite;
}
div.dust2:nth-of-type(45)
{
top: 10%;
left: 30%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(46)
{
top: 43%;
left: 40%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(47)
{
top: 15%;
left: 35%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(48)
{
top: 13%;
left: 40%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(49)
{
top: 32%;
left: 32%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(50)
{
top: 22%;
left: 70%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(51)
{
top: 28%;
left: 74%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(52)
{
top: 24%;
left: 75%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(53)
{
top: 15%;
left: 115%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(54)
{
top: 10%;
left: 110%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(55)
{
top: 15%;
left: 105%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(56)
{
top: 5%;
left: 5%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(57)
{
top: 8%;
left: 10%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(58)
{
top: 35%;
left: 110%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(59)
{
top: 30%;
left: 107%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(60)
{
top: 22%;
left: 137%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(61)
{
top: 32%;
left: 87%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(62)
{
top: 42%;
left: 127%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(63)
{
top: 37%;
left: 4%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(64)
{
top: 22%;
left: 190%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(65)
{
top: 28%;
left: 179%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity3 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(66)
{
top: 42%;
left: 177%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(67)
{
top: 60%;
left: 30%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(68)
{
top: 93%;
left: 40%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(69)
{
top: 65%;
left: 15%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity2 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(70)
{
top: 63%;
left: 50%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity1 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(71)
{
top: 82%;
left: 32%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(72)
{
top: 70%;
left: 60%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(73)
{
top: 18%;
left: 74%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity2 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(74)
{
top: 74%;
left: 75%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(75)
{
top: 65%;
left: 115%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(76)
{
top: 60%;
left: 100%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity3 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(77)
{
top: 75%;
left: 105%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity1 10s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(78)
{
top: 55%;
left: 5%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(79)
{
top: 68%;
left: 10%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity2 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(80)
{
top: 95%;
left: 110%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 8s 1.5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(81)
{
top: 80%;
left: 107%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(82)
{
top: 72%;
left: 147%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(83)
{
top: 82%;
left: 87%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity1 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(84)
{
top: 92%;
left: 127%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity3 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(85)
{
top: 87%;
left: 11%;
width: 1.2vmin;
height: 1.2vmin;
animation: dust-opacity2 8s 1s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(86)
{
top: 72%;
left: 180%;
width: 1vmin;
height: 1vmin;
animation: dust-opacity3 10s .5s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(87)
{
top: 78%;
left: 179%;
width: .8vmin;
height: .8vmin;
animation: dust-opacity1 8s infinite, dust-move2 50s 16s linear infinite;
}
div.dust2:nth-of-type(88)
{
top: 82%;
left: 167%;
width: 1.1vmin;
height: 1.1vmin;
animation: dust-opacity2 10s 1s infinite, dust-move2 50s 16s linear infinite;
}
/*
▀▄▀▄▀▄▀▄▀▄▀▄ ANIMATIONS ▀▄▀▄▀▄▀▄▀▄▀▄
*/
@keyframes bloom
{
to
{
visibility: visible;
}
}
@keyframes dust-on
{
to
{
opacity: 1;
}
}
@keyframes dust-move
{
from
{
transform: translate3d(0, -100vh, 0);
}
50%
{
transform: translate3d(-8rem, 0, 0);
}
to
{
visibility: visible;
transform: translate3d(0, 100vh, 0);
}
}
@keyframes dust-move2
{
from
{
transform: translate3d(0, -100vh, 0);
}
50%
{
transform: translate3d(-4rem, 0, 0);
}
to
{
visibility: visible;
transform: translate3d(0, 100vh, 0);
}
}
@keyframes dust-opacity1
{
0%
{
opacity: 0;
}
10%
{
opacity: .5;
}
20%
{
opacity: 1;
}
30%
{
opacity: 1;
}
40%
{
opacity: 1;
}
50%
{
opacity: 1;
}
60%
{
opacity: 1;
}
70%
{
opacity: 1;
}
80%
{
opacity: 1;
}
90%
{
opacity: .5;
}
100%
{
opacity: 0;
}
}
@keyframes dust-opacity2
{
0%
{
opacity: 0;
}
10%
{
opacity: .3;
}
20%
{
opacity: .6;
}
30%
{
opacity: .6;
}
40%
{
opacity: .6;
}
50%
{
opacity: .6;
}
60%
{
opacity: .6;
}
70%
{
opacity: .6;
}
80%
{
opacity: .6;
}
90%
{
opacity: .3;
}
100%
{
opacity: 0;
}
}
@keyframes dust-opacity3
{
0%
{
opacity: 0;
}
10%
{
opacity: .15;
}
20%
{
opacity: .3;
}
30%
{
opacity: .3;
}
40%
{
opacity: .3;
}
50%
{
opacity: .3;
}
60%
{
opacity: .3;
}
70%
{
opacity: .3;
}
80%
{
opacity: .3;
}
90%
{
opacity: .15;
}
100%
{
opacity: 0;
}
}
@keyframes flapping-left
{
to
{
transform: rotate(-55deg);
}
}
@keyframes flapping-right
{
to
{
transform: rotate(55deg);
}
}
@keyframes fly-left
{
from
{
transform: rotate(-25deg) translate3d(10rem, 0rem, 0);
}
50%
{
transform: rotate(0deg) translate3d(10rem, 3rem, 0);
}
to
{
visibility: visible;
transform: rotate(-25deg) translate3d(10rem, 0rem, 0);
}
}
@keyframes fly-right
{
0%
{
transform: translate3d(44rem, 13.5rem, 0);
}
10%
{
transform: translate3d(44rem, 13.5rem, 0);
}
20%
{
transform: translate3d(44rem, 13.5rem, 0);
}
30%
{
transform: translate3d(41.5rem, 16rem, 0);
}
40%
{
transform: translate3d(39rem, 18.5rem, 0);
}
50%
{
transform: translate3d(41.5rem, 21rem, 0);
}
60%
{
transform: translate3d(44rem, 23.5rem, 0);
}
70%
{
transform: translate3d(46.5rem, 21rem, 0);
}
80%
{
transform: translate3d(49rem, 18.5rem, 0);
}
90%
{
transform: translate3d(46.5rem, 16rem, 0);
}
100%
{
visibility: visible;
transform: translate3d(44rem, 13.5rem, 0);
}
}
@keyframes fly2-left
{
0%
{
transform: translate3d(30rem, 15rem, 0);
}
25%
{
transform: translate3d(25rem, 15rem, 0);
}
50%
{
transform: translate3d(30rem, 15rem, 0);
}
75%
{
transform: translate3d(35rem, 15rem, 0);
}
100%
{
visibility: visible;
transform: translate3d(30rem, 15rem, 0);
}
}
@keyframes fly2-right
{
from
{
transform: rotate(-25deg) translate3d(12rem, 3rem, 0);
}
50%
{
transform: rotate(0);
}
to
{
visibility: visible;
transform: rotate(-25deg) translate3d(12rem, 3rem, 0);
}
}
@keyframes font-animate
{
to
{
opacity: 1;
}
}
@keyframes popping
{
from
{
visibility: visible;
transform: scale(.7);
}
50%
{
transform: scale(1);
}
to
{
visibility: hidden;
transform: scale(.7);
}
}
@keyframes stretch
{
from
{
stroke-dashoffset: 200%;
}
to
{
visibility: visible;
stroke-dashoffset: 0;
}
}
@keyframes stretch-secondary
{
from
{
stroke-dashoffset: 200%;
}
to
{
visibility: visible;
stroke-dashoffset: 0;
}
}
/* media queries */
@media only screen and (orientation: landscape)
{
section
{
width: 75%;
height: 75%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
</head>
<body>
<section>
<svg id="plant-left" viewBox="0 0 1026 715" xmlns="http://www.w3.org/2000/svg">
<g>
<g class="stems">
<g>
<path class="stem1" d="M42.12 650.77C42.12 650.77 13.33 433.94 256.43 449.05C334.15 453.87 392.8 442.83 438.55 423.16C469.379 409.897 497.569 391.192 521.77 367.94C563.22 328.55 588.77 283.01 614.69 250.56C673.34 177.2 758.69 7.83998 950.56 67.17" />
<path class="flowers flower1" d="M1004.57 113.11C1003.78 115.681 1002.29 117.98 1000.26 119.752C998.239 121.523 995.762 122.696 993.109 123.139C990.456 123.582 987.732 123.278 985.242 122.261C982.752 121.244 980.594 119.554 979.01 117.38L955.81 73.38C954.875 73.9749 953.775 74.2553 952.67 74.18L950.83 119.97L950.68 123.7C950.093 126.998 948.384 129.992 945.844 132.176C943.303 134.36 940.087 135.6 936.738 135.686C933.389 135.771 930.113 134.698 927.464 132.647C924.815 130.596 922.956 127.694 922.2 124.43C921.524 121.484 921.772 118.401 922.91 115.6V115.49L925.36 111.61L925.55 111.4L925.74 111.22L925.92 111.03L949.54 73.22C948.552 72.6541 947.766 71.7941 947.29 70.76L903.46 93.9C902.78 94.08 902.21 94.28 901.54 94.44C897.778 95.2927 893.831 94.6159 890.568 92.5587C887.305 90.5014 884.993 87.2321 884.14 83.47C883.287 79.7079 883.964 75.7612 886.021 72.498C888.079 69.2349 891.348 66.9227 895.11 66.07C895.769 65.9279 896.437 65.8344 897.11 65.79H897.22L901.33 65.93L901.67 66.04H901.93L946.54 67.64C946.56 67.075 946.647 66.5143 946.8 65.97C946.986 65.4313 947.231 64.9149 947.53 64.43L908.81 40.15L905.65 38.15C905.125 37.7503 904.637 37.3052 904.19 36.82C901.589 33.9702 900.218 30.2094 900.373 26.3544C900.528 22.4994 902.198 18.8612 905.02 16.23C906.411 14.9252 908.047 13.9098 909.834 13.243C911.62 12.5761 913.522 12.271 915.427 12.3455C917.333 12.4199 919.205 12.8724 920.934 13.6766C922.663 14.4808 924.215 15.6207 925.5 17.03C925.97 17.55 926.32 18.03 926.78 18.56L927.78 20.25L949.96 62.25C950.892 61.6512 951.995 61.3738 953.1 61.46L954.86 15.91L954.93 12.04L955 11.81C955.07 11.2516 955.197 10.702 955.38 10.17C956.523 6.47552 959.087 3.38646 962.508 1.58236C965.928 -0.221735 969.926 -0.593097 973.62 0.549986C977.314 1.69307 980.403 4.25696 982.208 7.67763C984.012 11.0983 984.383 15.0955 983.24 18.79C983.074 19.4079 982.846 20.0076 982.56 20.58L982.49 20.81L982.3 21L980.87 23.2L980.43 23.82L956.3 62.45C957.257 63.0071 958.008 63.8598 958.44 64.88L999.44 43.25L1001.7 42.07C1004.84 40.7388 1008.35 40.5605 1011.62 41.5666C1014.88 42.5727 1017.68 44.6986 1019.53 47.5689C1021.37 50.4393 1022.15 53.8697 1021.71 57.2547C1021.27 60.6398 1019.65 63.7619 1017.14 66.07C1014.81 68.2617 1011.83 69.6314 1008.65 69.97H1008.53L1004.81 69.83L959.26 68.06C959.228 68.6271 959.141 69.1897 959 69.74C958.81 70.2705 958.565 70.7799 958.27 71.26L996.99 95.77L997.45 95.91L1000.07 97.6C1002.26 99.4582 1003.85 101.92 1004.65 104.678C1005.45 107.436 1005.42 110.368 1004.57 113.11V113.11Z" />
</g>
<g>
<path class="stem2" d="M266.37 448.9C266.37 448.9 669.06 218.95 379.06 69.07" />
<path class="flowers flower2" d="M333.97 14.33C334.843 12.6351 336.043 11.1292 337.5 9.8988C338.956 8.66837 340.642 7.73754 342.459 7.15969C344.276 6.58185 346.189 6.36834 348.089 6.53141C349.989 6.69449 351.838 7.23093 353.53 8.11C356.304 9.53396 358.534 11.8277 359.88 14.64L374.97 62.02C375.996 61.6056 377.126 61.5251 378.2 61.79L388.06 17.05L388.86 13.4C390.021 10.2564 392.232 7.60986 395.118 5.90765C398.005 4.20544 401.391 3.55187 404.704 4.05738C408.016 4.56289 411.053 6.19649 413.301 8.68216C415.549 11.1678 416.869 14.3531 417.04 17.7C417.177 20.7183 416.384 23.706 414.77 26.26L414.72 26.36L411.62 29.75L411.4 29.93L411.18 30.08L410.97 30.23L381.05 63.23C381.929 63.9577 382.556 64.9447 382.84 66.05L430.06 51.05C430.76 50.99 431.35 50.9 432.06 50.86C435.769 50.9065 439.32 52.3689 441.986 54.9478C444.653 57.5267 446.232 61.0272 446.402 64.7327C446.572 68.4383 445.32 72.0686 442.901 74.8808C440.482 77.6929 437.079 79.4742 433.39 79.86C432.722 79.8833 432.054 79.8599 431.39 79.79L431.29 79.73L427.29 78.87L426.97 78.71H426.71L383.06 69.32C382.94 69.8731 382.756 70.4101 382.51 70.92C382.231 71.4169 381.895 71.88 381.51 72.3L415.35 103.03.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0