树长大css动画,纯CSS做的树生长动画

最新推荐文章于 2022-08-01 19:29:38 发布

杨翔佩

最新推荐文章于 2022-08-01 19:29:38 发布

阅读量857

点赞数

文章标签：树长大css动画

这篇博客展示了如何利用CSS来创建一个树生长的动画效果。通过定义不同的关键帧动画，实现了树干、树枝和树叶从无到有、从小到大的平滑生长过程，呈现出逼真的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

.frame {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

border-radius: 2px;

box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.06);

overflow: hidden;

background: #E0F0E5;

color: #fff;

font-family: 'Open Sans', Helvetica, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.tree {

position: absolute;

z-index: 2;

top: 120px;

left: 198px;

}

.tree:after {

position: absolute;

content: '';

display: block;

width: 80px;

height: 4px;

background: #B9D6C2;

bottom: 0px;

left: -38px;

border-radius: 2px;

-webkit-animation: scaleX .7s ease-in-out;

animation: scaleX .7s ease-in-out;

}

.tree .leafs {

position: absolute;

z-index: -1;

width: 0;

height: 0;

top: -60px;

left: -60px;

border-style: solid;

border-width: 0 62px 204px 62px;

border-color: transparent transparent #E84624 transparent;

-webkit-animation: scaleX 1s ease-in-out .7s both;

animation: scaleX 1s ease-in-out .7s both;

}

.tree .leafs:before {

position: absolute;

content: '';

display: block;

width: 0;

height: 0;

top: 0;

left: -62px;

border-style: solid;

border-width: 0 0px 204px 62px;

border-color: transparent transparent rgba(0, 0, 0, 0.2) transparent;

}

.tree .trunk {

position: relative;

width: 4px;

height: 200px;

background: #E8C87E;

border-radius: 2px;

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

-webkit-animation: scaleY .7s ease-in-out;

animation: scaleY .7s ease-in-out;

}

.tree .trunk .branch {

position: absolute;

width: 4px;

height: 60px;

background: #E8C87E;

border-radius: 2px;

-webkit-transform-origin: 50% 100%;

transform-origin: 50% 100%;

}

.tree .trunk > .branch {

-webkit-transform: rotate(-40deg);

transform: rotate(-40deg);

}

.tree .trunk > .branch:nth-child(2n) {

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

.tree .trunk > .branch:nth-child(1) {

top: 0px;

height: 20px;

}

.tree .trunk > .branch:nth-child(2) {

top: 20px;

height: 30px;

}

.tree .trunk > .branch:nth-child(3) {

top: 40px;

height: 40px;

}

.tree .trunk > .branch:nth-child(4) {

top: 60px;

height: 50px;

}

.tree .trunk > .branch:nth-child(5) {

top: 80px;

height: 60px;

}

@-webkit-keyframes scaleY {

0% {

-webkit-transform: scaleY(0);

transform: scaleY(0);

}

60% {

-webkit-transform: scaleY(1.1);

transform: scaleY(1.1);

}

80% {

-webkit-transform: scaleY(0.95);

transform: scaleY(0.95);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

@keyframes scaleY {

0% {

-webkit-transform: scaleY(0);

transform: scaleY(0);

}

60% {

-webkit-transform: scaleY(1.1);

transform: scaleY(1.1);

}

80% {

-webkit-transform: scaleY(0.95);

transform: scaleY(0.95);

}

100% {

-webkit-transform: scaleY(1);

transform: scaleY(1);

}

@-webkit-keyframes scaleX {

0% {

-webkit-transform: scaleX(0);

transform: scaleX(0);

}

60% {

-webkit-transform: scaleX(1.1);

transform: scaleX(1.1);

}

80% {

-webkit-transform: scaleX(0.95);

transform: scaleX(0.95);

}

100% {

-webkit-transform: scaleX(1);

transform: scaleX(1);

}

@keyframes scaleX {

0% {

-webkit-transform: scaleX(0);

transform: scaleX(0);

}

60% {

-webkit-transform: scaleX(1.1);

transform: scaleX(1.1);

}

80% {

-webkit-transform: scaleX(0.95);

transform: scaleX(0.95);

}

100% {

-webkit-transform: scaleX(1);

transform: scaleX(1);

}