html+css怎样制作圣诞树

这篇文章主要介绍了html+css怎样制作圣诞树，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
html代码

Merry Christmas

✦
✦
✦
✦
✦
✦

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 tr免费云主机域名ansparent;
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怎样制作圣诞树”这篇文章对大家有帮助，同时也希望大家多多支持百云主机，关注百云主机行业资讯频道，更多相关知识等着你来学习!

相关推荐: 怎么用HTML创建表格

小编给大家分享一下怎么用HTML创建表格，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ HTML表允许您将数据排列成行和列。它们通常用于显示表格数据，例如产品列表，客户详细信息，财务…