css3做圣诞树

圣诞节即将到来，如何利用CSS3制作一个漂亮的圣诞树？下面我们来看一下步骤。

.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圣诞树就完成啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！