css3做圣诞树 |css按钮之间的间距

.tree {
position: relative;
width: 150px;
height: 200px;
}
.tree:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 100px solid green;
transform: translateX(-50%);
}
.tree:after {
content: "";
position: absolute;
bottom: 20px;
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid green;
transform: translateX(-50%);
}
.tree__ornament {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
animation: move 2s ease-in-out infinite;
}
@keyframes move {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}

首先，大家需要一个容器div，给它一个class名为tree。然后利用:before和:after伪元素来画出树干和树叶，设置宽高、颜色等属性即可。在树叶上添加小装饰，通过animation属性控制运动轨迹，做出有趣的效果。

这样，一个简单的CSS3圣诞树就完成啦！