效果演示
这段代码通过HTML和CSS创建了一个具有3D效果的树的图形,包括分支、树干和阴影,通过自定义属性和复杂的变换实现了较为逼真的立体效果。
HTML
<div class="container">
<div class="tree">
<div class="branch" style="--x:0">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="branch" style="--x:1">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="branch" style="--x:2">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="branch" style="--x:3">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="stem">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<span class="shadow"></span>
</div>
</div>
- container:外层容器,用于水平居中放置树的容器。
- tree:树的主要容器。
- branch,代表树的分支,每个分支内部有四个span元素,可能用于构建分支的细节。
- stem代表树的树干,内部也有四个span元素。
- shadow用于创建树的阴影效果。
CSS
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.tree {
position: relative;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(30deg);
animation: treeAnimate 5s linear infinite;
}
@keyframes treeAnimate {
0% {
transform: rotateX(-20deg) rotateY(360deg);
}
100% {
transform: rotateX(-20deg) rotateY(0deg);
}
}
.tree div {
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateY(calc(25px * var(--x))) translateZ(0px);
}
.tree div.branch span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #69c069, #77dd77);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
border-bottom: 5px solid #00000019;
transform-origin: bottom;
transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
}
.tree div.stem span {
position: absolute;
top: 110px;
left: calc(50% - 7.5px);
width: 15px;
height: 50%;
background: linear-gradient(90deg, #bb4622, #df7214);
border-bottom: 5px solid #00000019;
transform-origin: bottom;
transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
}
.shadow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
filter: blur(20px);
transform-style: preserve-3d;
transform: rotateX(90deg) translateZ(-65px);
}
- .container类:width: 100%;占据整个宽度。display: flex; justify-content: center; align-items: center;使内部内容水平和垂直居中。
- .tree类:position: relative;相对定位,作为内部元素定位的参考。width: 50px; height: 50px;设置树的容器大小。transform-style: preserve-3d;启用 3D 变换效果。transform: rotateX(-20deg) rotateY(30deg);对树进行初始的 3D 旋转。animation: treeAnimate 5s linear infinite;应用名为treeAnimate的动画,持续 5 秒,线性过渡,无限循环。
- @keyframes treeAnimate:定义树的动画,使树在 Y 轴上从初始的旋转 360 度逐渐变为 0 度,实现旋转效果。
- .tree div选择器:position: absolute; top: -50px; left: 0;绝对定位在树容器的顶部左侧。width: 100%; height: 100%;占据整个树容器的大小。transform-style: preserve-3d;启用 3D 变换效果。transform: translateY(calc(25px * var(–x))) translateZ(0px);根据自定义属性–x的值在 Y 轴上进行平移,用于创建不同层次的分支。
- .tree div.branch span选择器:position: absolute; top: 0; left: 0;绝对定位在分支容器内。width: 100%; height: 100%;占据整个分支容器的大小。background: linear-gradient(90deg, #69c069, #77dd77);设置背景为绿色渐变。clip-path: polygon(50% 0%, 0% 100%, 100% 100%);创建一个三角形形状。border-bottom: 5px solid #00000019;添加底部的深色边框模拟阴影效果。transform-origin: bottom;设置变换的原点在底部。transform: rotateY(calc(90deg * var(–i))) rotateX(30deg) translateZ(28.5px);根据自定义属性–i的值在 Y 轴上进行旋转,并在 X 轴上倾斜一定角度,同时在 Z 轴上进行平移,用于创建分支的立体效果。
- .tree div.stem span选择器:position: absolute; top: 110px; left: calc(50% - 7.5px);绝对定位在树干的特定位置。width: 15px; height: 50%;设置树干的大小。background: linear-gradient(90deg, #bb4622, #df7214);设置背景为棕色渐变。border-bottom: 5px solid #00000019;添加底部的深色边框模拟阴影效果。transform-origin: bottom;设置变换的原点在底部。transform: rotateY(calc(90deg * var(–i))) translateZ(7.5px);根据自定义属性–i的值在 Y 轴上进行旋转,并在 Z 轴上进行平移,用于创建树干的立体效果。
- .shadow类:position: absolute; top: 0; left: 0;绝对定位在树容器的左上角。width: 100%; height: 100%;占据整个树容器的大小。background: rgba(0, 0, 0, 0.4);设置半透明的黑色背景作为阴影。filter: blur(20px);添加模糊效果以模拟阴影的柔和度。transform-style: preserve-3d;启用 3D 变换效果。transform: rotateX(90deg) translateZ(-65px);在 X 轴上旋转并在 Z 轴上进行平移,以放置阴影在树的下方。