<!DOCTYPE html>
<html>
<head>
<title>Merry X-Mas!!</title>
<style>
@keyframes fall {
0%{top:-10%}
100%{top:100%}
}
.snow {
z-index:9998;
position:fixed;
top:-10%;
color: #ddffff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 3px #000;
animation-timing-function:linear;
animation-name:fall;
animation-duration:10s;
animation-iteration-count:infinite;
}
.snow:nth-of-type(0){left:31%;animation-delay:0s}
.snow:nth-of-type(1){left:51%;animation-delay:1s}
.snow:nth-of-type(2){left:21%;animation-delay:2s}
.snow:nth-of-type(3){left:41%;animation-delay:3s}
.snow:nth-of-type(4){left:71%;animation-delay:4s}
.snow:nth-of-type(5){left:81%;animation-delay:5s}
.snow:nth-of-type(6){left:91%;animation-delay:6s}
.snow:nth-of-type(7){left:31%;animation-delay:6s}
.snow:nth-of-type(8){left:51%;animation-delay:7s}
.snow:nth-of-type(9){left:21%;animation-delay:8s}
.snow:nth-of-type(10){left:41%;animation-delay:9s}
.snow:nth-of-type(11){left:71%;animation-delay:10s}
.snow:nth-of-type(12){left:81%;animation-delay:11s}
.snow:nth-of-type(13){left:91%;animation-delay:12s}
.textbox {
position:absolute;
top:25%; left:50%;
background-color: bisque;
width:9em;
height:3em;
transform: translate(-50%, -50%);
margin:0px 10px;
border:5px groove brown;
font-family: Georgia, "Times New Roman", serif;
font-size : 2em;
text-align: center;
}
.textbox p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.leaf{
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid green;
}
.star{
position: absolute;
top:46%;
left:46.7%;
display: block;
color: yellow;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid yellow;
border-left: 50px solid transparent;
transform: translate(-50%, -50%);
transform: rotate(35deg);
}
.star:before {
border-bottom: 40px solid yellow;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -22.5px;
left: -32.5px;
display: block;
content: '';
transform: rotate(-35deg);
}
.star:after {
position: absolute;
display: block;
color: yellow;
top: 1.5px;
left: -52.5px;
width: 0px;
height: 0px;
border-right: 50px solid transparent;
border-bottom: 35px solid yellow;
border-left: 50px solid transparent;
transform: rotate(-70deg);
content: '';
}
.stem {
position: absolute;
top:80%;
left:50%;
transform: translate(-50%, -50%);
width: 70px;
height: 170px;
background: brown;
}
body {
background-color: black;
margin-bottom: 120px;
}
footer {
position: absolute;
background-color: cornsilk;
left:0;
top:100%;
transform: translate(0, -100%);
width:100%;
height:80px;
z-index:9999;
}
</style>
</head>
<footer></footer>
<body>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="snow">❅</div>
<div class="textbox">
<p>MERRY<br>X-MAS</p>
</div>
<div class="stem"></div>
<div class="leaf"></div>
<div class="leaf" style="top:55%; border-left: 70px solid transparent; border-right: 70px solid transparent;"></div>
<div class="leaf" style="top:60%; border-left: 90px solid transparent; border-right: 90px solid transparent;"></div>
<div class="leaf" style="top:65%; border-left: 110px solid transparent; border-right: 110px solid transparent;"></div>
<div class="leaf" style="top:70%; border-left: 130px solid transparent; border-right: 130px solid transparent;"></div>
<div class="star"></div>
</body>
</html>
基于HTML+CSS+JS的圣诞树源码，可以直接在浏览器中打开
需积分: 5 188 浏览量
2022-12-07
07:02:41
上传
评论
收藏 7KB RAR 举报
christmas_html.rar （6个子文件） 
html 
text_tree.html 1KB snow-N-tree.html 6KB tree.html 3KB 3d-tree.html 4KB twinkle-tree.html 5KB animation-2d-tree.html 3KB资源评论
