HTML5動態圣誕樹代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5動態圣誕樹代碼</title>
<style>
#tree {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
width: 300px;
height: 400px;
border-left: 10px solid brown;
border-right: 10px solid brown;
border-bottom: 10px solid brown;
border-radius: 50% 50% 0 0;
background-color: #01796F;
}
#tree::before {
content: "";
position: absolute;
top: -50px;
left: -30px;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 50px solid brown;
border-radius: 50% 50% 0 0;
}
#tree::after {
content: "";
position: absolute;
bottom: -100px;
left: -50px;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid #008080;
}
.decoration {
position: absolute;
border-radius: 50%;
}
.decoration.red {
height: 20px;
width: 20px;
background-color: red;
box-shadow: 0 0 10px 3px red;
}
.decoration.yellow {
height: 15px;
width: 15px;
background-color: yellow;
box-shadow: 0 0 10px 3px yellow;
}
.decoration.blue {
height: 10px;
width: 10px;
background-color: blue;
box-shadow: 0 0 10px 3px blue;
}
.decoration.green {
height: 5px;
width: 5px;
background-color: green;
box-shadow: 0 0 10px 3px green;
}
</style>
</head>
<body>
<div id="tree"></div>
<script>
function addDecoration() {
var decorationTypes = [".red", ".yellow", ".blue", ".green"];
var randomDecoration = decorationTypes[Math.floor(Math.random() * decorationTypes.length)];
var decoration = document.createElement("div");
decoration.className = "decoration" + randomDecoration;
decoration.style.left = Math.floor(Math.random() * 250) + "px";
decoration.style.top = Math.floor(Math.random() * 350) + "px";
document.getElementById("tree").appendChild(decoration);
}
setInterval(addDecoration, 500);
</script>
</body>
</html>上述代碼就是一個利用HTML5技術實現動態效果的圣誕樹頁面，它采用的技術包括HTML、CSS和JavaScript。在HTML中，我們定義了一個id為tree的div元素，作為圣誕樹的主體。我們使用CSS設置了圣誕樹的外觀，包括顏色、形狀和邊框等；同時，我們還定義了裝飾品的樣式，包括顏色和大小等。在JavaScript中，我們使用setInterval方法循環調用addDecoration函數，用于向圣誕樹上不斷添加隨機顏色的裝飾品。整個頁面設計簡潔，效果炫酷，是一個很好的HTML5練手項目。
上一篇html5動態源代碼
下一篇html5加陰影的代碼