HTML5圣誕樹代碼
在這個圣誕將到來的時刻,如何使用HTML5來慶祝呢?這里是一個使用HTML5和CSS3制作的圣誕樹代碼示例。
/* 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代碼 */
你可以將這段代碼復制到你擺放圣誕樹的網頁中,然后利用JavaScript添加一些閃閃發光的效果、音樂和一些祝福語,讓你的朋友和家人感受到你對他們的祝福。