HTML的特效越來越多，其中櫻花樹特效被廣泛使用。以下是一個使用HTML實現(xiàn)櫻花樹特效的網(wǎng)頁代碼：
<!DOCTYPE html>
<html>
<head>
<title>櫻花樹特效</title>
<meta charset="UTF-8">
<style>
body {
overflow: hidden;
}
#container {
position: absolute;
left: 50%;
top: 50%;
width: 900px;
height: 600px;
margin-left: -450px;
margin-top: -300px;
}
.sakura {
position: absolute;
background: url('sakura.png') no-repeat;
width: 20px;
height: 20px;
z-index: 100;
animation: falling 9s linear infinite;
transform: translateZ(0);
}
.sakura:nth-child(1) {
left: 10%;
animation-delay: 0s;
transform: scale(0.3);
}
.sakura:nth-child(2) {
left: 20%;
animation-delay: 1s;
transform: scale(0.5);
}
.sakura:nth-child(3) {
left: 30%;
animation-delay: 4s;
transform: scale(0.4);
}
.sakura:nth-child(4) {
left: 40%;
animation-delay: 2s;
transform: scale(0.3);
}
.sakura:nth-child(5) {
left: 50%;
animation-delay: 6s;
transform: scale(0.5);
}
.sakura:nth-child(6) {
left: 60%;
animation-delay: 3s;
transform: scale(0.4);
}
.sakura:nth-child(7) {
left: 70%;
animation-delay: 5s;
transform: scale(0.3);
}
.sakura:nth-child(8) {
left: 80%;
animation-delay: 8s;
transform: scale(0.5);
}
.sakura:nth-child(9) {
left: 90%;
animation-delay: 7s;
transform: scale(0.4);
}
@keyframes falling {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 0;
}
50% {
transform: translateY(300px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(600px) rotate(180deg);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="container">
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
<div class="sakura"></div>
</div>
</body>
</html>上述代碼使用了CSS中的position、transform、animation等屬性實現(xiàn)了櫻花樹的特效，使得網(wǎng)頁更加美觀有趣。這也彰顯了HTML和CSS的強(qiáng)大和靈活性，可以通過代碼實現(xiàn)各種有趣的效果和交互。