用html写树干的形状,HTML5使用纯CSS3构建的树枝和树叶

最新推荐文章于 2023-07-24 23:28:16 发布

weixin_39590453

最新推荐文章于 2023-07-24 23:28:16 发布

阅读量344

点赞数

文章标签：用html写树干的形状

这篇博客展示了如何利用CSS实现一个精致的3D树叶动画效果。通过设置html和body的背景、尺寸和布局，并定义多个cable和leaf类，结合关键帧动画实现了叶子在页面上上下浮动的视觉效果。CSS的flexbox布局和 calc() 函数被用来精确控制元素的位置。此外，线性和径向渐变背景以及3D转换为设计增添了生动的色彩和立体感。

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

CSS

语言：

CSSSCSS

确定

html,

body {

background: #333;

width: 100%;

height: 100%;

display: flex;

display: -webkit-flex;

display: -moz-flex;

display: -o-flex;

display: -ms-flex;

justify-content: center;

-o-justify-content: center;

-ms-justify-content: center;

-webkit-justify-content: center;

-moz-justify-content: center;

align-items: center;

-moz-align-items: center;

-o-align-items: center;

-webkit-align-items: center;

-moz-align-items: center;

}

.cable {

position: absolute;

top: 35%;

left: 50%;

width: 2px;

height: 110px;

border-radius: 25%;

background: #fbd286;

}

.cable-2 {

left: calc(50% - 30px);

}

.cable-3 {

left: calc(50% + 30px);

}

.cable-4 {

left: calc(50% - 60px);

}

.cable-5 {

left: calc(50% + 60px);

}

.cable-6 {

left: calc(50% - 90px);

}

.cable-7 {

left: calc(50% + 90px);

}

.leaf-1 {

position: absolute;

width: 20px;

height: 20px;

border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-2 {

position: absolute;

top: 25px;

left: -18px;

width: 20px;

height: 20px;

border-bottom-left-radius: 30px;

border-top-right-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-3 {

position: absolute;

top: 50px;

width: 20px;

height: 20px;

border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

.leaf-4 {

position: absolute;

top: 75px;

left: -18px;

width: 20px;

height: 20px;

border-bottom-left-radius: 30px;

border-top-right-radius: 30px;

background: linear-gradient(55deg, #47cf73, #9df179, #47cf73 70%);

animation: fly 1s infinite alternate ease-in-out;

transform-style: preserve-3d;

transform: rotateY(50deg);

}

@-moz-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

@-webkit-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

@-o-keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}

@keyframes fly {

0% {

transform: translateY(0px);

}

50% {

transform: translateY(-2px);

}