HTML5圣誕樹(shù)代碼

在這個(gè)圣誕將到來(lái)的時(shí)刻，如何使用HTML5來(lái)慶祝呢？這里是一個(gè)使用HTML5和CSS3制作的圣誕樹(shù)代碼示例。

/* CSS代碼 */
.tree {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
top: -60px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
border-radius: 0 0 20px 20px;
}
.tree:before {
content: "";
position: absolute;
top: -30px;
left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
border-radius: 20px 20px 0 0;
}
.tree:after {
content: "";
position: absolute;
left: -75px;
top: -10px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
transform: rotate(-35deg);
}
.tree2 {
position: relative;
margin: 0 auto;
width: 0;
height: 0;
top: -110px;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 140px solid green;
border-radius: 0 0 20px 20px;
}
.tree2:before {
content: "";
position: absolute;
top: -70px;
left: -70px;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 140px solid green;
border-radius: 20px 20px 0 0;
}
.tree2:after {
content: "";
position: absolute;
left: -105px;
top: -20px;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 140px solid green;
transform: rotate(-35deg);
}
.star {
position: relative;
top: -200px;
left: -30px;
width: 0;
height: 0;
margin: 0 auto;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid gold;
border-radius: 0 0 20px 20px;
}
.star:before {
content: "";
position: absolute;
top: -50px;
left: -40px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid gold;
border-radius: 20px 20px 0 0;
}
.star:after {
content: "";
position: absolute;
top: -60px;
left: -60px;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 80px solid gold;
border-radius: 30px 30px 0 0;
}
/* HTML代碼 */

你可以將這段代碼復(fù)制到你擺放圣誕樹(shù)的網(wǎng)頁(yè)中，然后利用JavaScript添加一些閃閃發(fā)光的效果、音樂(lè)和一些祝福語(yǔ)，讓你的朋友和家人感受到你對(duì)他們的祝福。