CSS圣誕樹教程

圣誕樹是一年一度的節(jié)日中必不可少的元素，為何不嘗試使用CSS創(chuàng)建一個(gè)漂亮的圣誕樹呢？下面是一個(gè)簡單的CSS圣誕樹教程。

CSS代碼

.tree {
position: relative;
width: 0;
height: 0;
margin: 50px auto 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid green;
}
.star {
position: absolute;
top: -50px;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 70px solid yellow;
transform: rotate(35deg);
}
.light {
position: absolute;
border-radius: 50%;
background: yellow;
}
.light1 {
top: -80px;
left: 30%;
width: 50px;
height: 50px;
}
.light2 {
top: -100px;
left: 50%;
width: 50px;
height: 50px;
}
.light3 {
top: -80px;
left: 70%;
width: 50px;
height: 50px;
}

HTML代碼

<div class="tree"></div>
<div class="star"></div>
<div class="light light1"></div>
<div class="light light2"></div>
<div class="light light3"></div>

解釋

上面的CSS和HTML代碼一起創(chuàng)建了一個(gè)美麗的圣誕樹！CSS指定了三個(gè)主要的元素：樹、星星和燈光。樹的形狀是一個(gè)三角形，使用一個(gè)綠色的邊框和透明的左右邊框創(chuàng)建。星星是黃色的，使用三角形的形狀和一個(gè)輕微的旋轉(zhuǎn)。燈光是三個(gè)圓形，全部為黃色。

HTML代碼只是簡單地添加了這些元素。

現(xiàn)在你可以嘗試更改CSS樣式，例如改變樹的形狀，使它更像真正的圣誕樹！

祝你圣誕快樂！