这篇文章主要介绍了html+css怎样制作圣诞树，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="巴打的圣诞树">
<title>html+css制作圣诞树</title>
<link rel="stylesheet" href="css/sd.css"/>
</head>
<body>
<p class="word">Merry Christmas</p>
<div class="tree">
<div class=star>
<div class="star-in"></div>
</div>
<!--树叶-->
<div class="leaf-box">
<div class="leaf">
<div class="edge"></div>
<div class="edge right"></div>
</div>
<div class="leaf">
<div class="edge"></div>
<div class="edge right"></div>
</div>
<div class="leaf">
<div class="edge"></div>
<div class="edge right"></div>
</div>
<div class="leaf">
<div class="edge"></div>
<div class="edge right"></div>
</div>
<div class="leaf">
<div class="edge"></div>
<div class="edge right"></div>
</div>
</div>
<!--树干-->
<div class="trunk"></div>
<!--彩色的球-->
<div class="ball-box">
<div class="ball b1"></div>
<div class="ball b2"></div>
<div class="ball b3"></div>
<div class="ball b4"></div>
<div class="ball b5"></div>
<div class="ball b6"></div>
<div class="ball b7"></div>
<div class="ball b8"></div>
<div class="ball b9"></div>
</div>
<!--闪烁-->
<div class="sparkle">
<span>✦</span>
<span>✦</span>
<span>✦</span>
<span>✦</span>
<span>✦</span>
<span>✦</span>
</div>
<div class="blink">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
CSS样式
html,body{
width:100%;
height:100%;
}
*{
margin:0;
padding:0;
}
body{
background-color:#000000;
}
.word{
font-size:60px;
text-align:center;
color:gold;
padding-top:70px;
letter-spacing:5px;
text-shadow:2px 4px 9px rgba(255, 255, 255, 0.7);
}
/*圣诞树外层div*/
.tree{
width:200px;
height:300px;
margin:110px auto 0 auto;
position: relative;
/*相对定位*/
/*border:1px solid #fff;*/
}
.star{
width:10px;
height:10px;
position:absolute;
/*background-color:#fff;*/
border-radius: 50%;
top:0px;
z-index: 1000;
left:50%;
transform:translateX(-50%);
box-shadow: 0 0 70px 30px rgb(253, 253, 253);
}
.star-in{
position:absolute;
left:35%;
top:70%;
border-right:200px solid transparent;
border-bottom: 150px solid gold;
border-left:200px solid transparent;
transform:translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
}
.star-in::before{
border-bottom:140px solid gold;
border-left:65px solid transparent;
border-right:65px solid transparent;
position:absolute;
top:-90px;
left:-140px;
content:'';
transform:rotate(-35deg);
}
.star-in::after{
border-bottom:140px solid gold;
border-left:210px solid transparent;
border-right:200px solid transparent;
position:absolute;
top:3px;
left:-200px;
content:'';
transform:rotate(-70deg);
}
.leaf{
position:absolute;
left:50%;
top:3%;
margin-left:-30px;
background-color:rgba(14,110,14);
width:60px;
height:60px;
border-radius:0 10px 35px 10px;
transform:rotate(45deg);
box-shadow: 2px 7px 2px rgba(43,43,43,0.2);
}
.edge{
position:absolute;
left:0;
bottom: 0;
background:rgba(14,110,14);
width:25px;
height:30px;
border-radius:0 10px 35px 10px;
transform:translateY(50%) translateX(0);
}
.edge.right{
position:absolute;
left:unset;
bottom:unset;
top:0;
right:0;
background:rgba(14,110,14);
width:25px;
height:30px;
border-radius:0 10px 35px 10px;
transform:translateY(0) translateX(50%);
}
/*双数修改背景色*/
.leaf:nth-child(eve){
background-color: #0f880f;
}
.leaf:nth-child(eve).edge{
background-color: #0f880f;
}
/*最上面*/
.leaf:nth-child(1){
z-index: 100;
transform: rotate(45deg) scale(0.8);
}
/*第二*/
.leaf:nth-child(2){
z-index: 99;
top:15%;
transform: rotate(45deg) scale(1.3);
}
.leaf:nth-child(3){
z-index: 98;
top:28%;
transform:rotate(45deg) scale(1.6);
}
.leaf:nth-child(4){
z-index: 97;
top:41%;
transform:rotate(45deg) scale(1.9);
}
.leaf:nth-child(5){
z-index: 96;
top:54%;
transform:rotate(45deg) scale(2.2);
}
.trunk{
width:25px;
height:45px;
border-radius:0 0 3px 3px;
position:absolute;
left:50%;
transform:translate(-50%);
bottom:20px;
z-index: 1;
box-shadow: 0 0 80px 5px rgb(253, 253, 253);
background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
}
.ball{
width:20px;
height:20px;
background:#f00;
box-shadow: -1px -1px 6px inset #600,1px 1px 8px inset #ffc9c9;
border-radius: 50%;
z-index:101;
position:absolute;
}
.b1{
left:25%;
top:30%;
}
.b2{
left:35%;
top:50%;
}
.b3{
left:65%;
top:20%;
}
.b4{
left:45%;
top:22%;
}
.b5{
left:40%;
top:72%;
}
.b6{
left:60%;
top:52%;
}
.b7{
left:50%;
top:62%;
}
.b8{
left:80%;
top:42%;
}
.b9{
left:10%;
top:62%;
}
.b4,.b5,.b6{
background:#ececec;
box-shadow: -1px -1px 6px inset #615f5f,1px 1px 8px inset #fff;
}
.b7,.b8,.b9{
background:gold;
box-shadow: -1px -1px 6px inset #3a3101,1px 1px 8px inset #fff;
}
.sparkle span{
display:block;
position:absolute;
font-size: 20px;
z-index: 101;
color:#fff;
animation: sparkle 1.5s ease infinite alternatel;
}
/*闪烁动画*/
@keyframes sparkle{
0%,100%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
}
.sparkle span:nth-child(1){
left:30%;
top:40%;
}
.sparkle span:nth-child(2){
left:40%;
top:27%;
font-size: 15px;
}
.sparkle span:nth-child(3){
left:50%;
top:57%;
font-size: 12px;
}
.sparkle span:nth-child(4){
left:70%;
top:67%;
font-size: 14px;
}
.sparkle span:nth-child(5){
left:54%;
top:20%;
font-size: 20px;
}
.sparkle span:nth-child(6){
left:60%;
top:33%;
font-size: 20px;
}
.blink div{
width:3px;
height:3px;
background: #fff;
z-index: 101;
position:absolute;
border-radius: 50%;
animation:blink 1.5s ease infinite alternate;
}
.blink div:nth-child(2){
left:34%;
top:13%;
transform: scale(1.2);
}
.blink div:nth-child(3){
left:54%;
top:43%;
transform: scale(0.6);
}
.blink div:nth-child(4){
left:64%;
top:33%;
transform: scale(1.4);
}
.blink div:nth-child(5){
left:34%;
top:63%;
transform: scale(1.8);
}
.blink div:nth-child(6){
left:14%;
top:76%;
transform: scale(1.5);
}
@keyframes blink{
0%{
box-shadow: 0 0 0 0 #fff;
}
25%{
box-shadow: 0 0 1px 1px #fff;
}
50%{
box-shadow: 0 0 2px 2px #fff;
}
75%{
box-shadow: 0 0 3px 3px #fff;
}
100%{
box-shadow: 0 0 4px 4px #fff;
}
}
感谢你能够认真阅读完这篇文章，希望小编分享的“html+css怎样制作圣诞树”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
