生活随笔
收集整理的這篇文章主要介紹了
html+css制作圣诞树
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
圣誕節到來，看到網上多種多樣的圣誕樹，作為程序員也想用代碼制作一棵圣誕樹出來，于是用html+css做了一個圣誕樹的網頁送給朋友
<!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>
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
);
}
.tree{width:200px
;height:300px
;margin:110px auto 0 auto
;position: relative
;
}
.star{width:10px
;height:10px
;position:absolute
;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制作圣诞树的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
