如何设计购物网站,网站开发补充协议,wordpress 常用小工具栏,如何做整人网站圣诞节到来#xff0c;看到网上多种多样的圣诞树#xff0c;作为程序员也想用代码制作一棵圣诞树出来#xff0c;于是用htmlcss做了一个圣诞树的网页送给朋友
html代码
!DOCTYPE html
html langenheadmeta charsetutf-8看到网上多种多样的圣诞树作为程序员也想用代码制作一棵圣诞树出来于是用htmlcss做了一个圣诞树的网页送给朋友
html代码
!DOCTYPE html
html langenheadmeta charsetutf-8meta nameauthor content巴打的圣诞树titlehtmlcss制作圣诞树/titlelink relstylesheet hrefcss/sd.css//headbodyp classwordMerry Christmas/pdiv classtreediv classstardiv classstar-in/div/div!--树叶--div classleaf-boxdiv classleafdiv classedge/divdiv classedge right/div/divdiv classleafdiv classedge/divdiv classedge right/div/divdiv classleafdiv classedge/divdiv classedge right/div/divdiv classleafdiv classedge/divdiv classedge right/div/divdiv classleafdiv classedge/divdiv classedge right/div/div/div!--树干--div classtrunk/div!--彩色的球--div classball-boxdiv classball b1/divdiv classball b2/divdiv classball b3/divdiv classball b4/divdiv classball b5/divdiv classball b6/divdiv classball b7/divdiv classball b8/divdiv classball b9/div/div!--闪烁--div classsparklespan✦/spanspan✦/spanspan✦/spanspan✦/spanspan✦/spanspan✦/span/divdiv classblinkdiv/divdiv/divdiv/divdiv/divdiv/divdiv/div/div/div/body
/htmlCSS样式 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;}
}效果图
