css画动感圣诞树代码 |css3向环形渐变

/* 画圣诞树 */
.tree{
position: relative;
width: 0;
height: 0;
margin: 50px auto;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 250px solid green;
}
/* 画小球 */
.tree:before{
position: absolute;
content: "";
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f00;
left: -50px;
top: -170px;
}
/* 画圣诞星星 */
.tree:after{
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid #ffd700;
left: -25px;
top: -95px;
}

以上代码会生成一个绿色的三角形形状，代表圣诞树的主干。大家使用:before和:after伪元素来添加装饰。在:before上，大家画了一个红色的小球。在:after上，大家画了一个闪闪发光的金色星星。

你可以在这个基础上增加更多的装饰，比如圣诞结、彩灯和雪花等，来让你的动感圣诞树更丰富多彩！