一、前言
快要圣诞节了，抓紧时间写一个代码来庆祝。写什么好呢？就用HTML实现一个动态的圣诞树吧。我能想到也就是有圣诞树了😅
二、效果展示
三、实现步骤
首先，我们把body默认margin和padding设为0，并把背景设为墨绿色。为了让圣诞树展示好看，再给body添加一个flex布局，让圣诞树展示在页面中间。
* { padding: 0; margin: 0; list-style: none; } body{ display: flex; height: 100vh; justify-content: center; align-items: center; background-color: rgb(54,66,70);
该下来实现圣诞树，可以分为两部分，第一部分树顶的星星，第二部分旋转的12条线（12个小 li）
星星部分用div实现，线条用li标签，外面套上一个ul标签
<ul class="tree"> <dis class="star"></dis> </ul> <-----------------> .tree{ position: relative; width: 500px; height: 700px; display: flex; justify-content: center;
li 一会用script动态添加
星星实现思路：
我们可以给div一个大小，50x50，这样成一个正方形。然后对齐添加clip-path属性裁剪成星星形状
.star{ width: 50px; height: 50px; position: absolute; background-color: rgb(236,234,167); z-index: 999; margin-bottom: 40px; clip-path: polygon(50% 0,65% 40%,100% 40%,72% 60%); }
树干实现思路：
因为要有12条树干，要写12个li标签，为了省事我们可以用JavaScript动态生成
let tree = document.querySelector('.tree'); for(let i = 0;i<128;i++){ let li = document.createElement('li'); li.style="--i:"+i; tree.appendChild(li); }
然后在css中对其添加动画效果，树干上的小点用::before来写。
完整代码在下面获取
四、编码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ChirstmasTrees</title> <style> *{ padding: 0; margin: 0; list-style:none; } body{ display: flex; height: 100vh; justify-content: center; align-items: center; background-color: rgb(54,66,70); } .tree{ position: relative; width: 500px; height: 700px; display: flex; justify-content: center; } .start{ width: 50px; height: 50px; position: absolute; background-color: rgb(236,234,167); z-index: 999; margin-bottom: 40px; clip-path: polygon(50% 0,65% 40%,100% 40%,72% 60%, 85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%); } .tree li{ position: absolute; top:25px; width: 2px; background: linear-gradient(rgba(46,204,113,0),rgba(46,204,113,.25)); transform-origin: 50% 0; animation:swing 4s ease-in-out infinite; height: calc(var(--i)*4px); animation-delay: calc(var(--i)*-0.23s); } @keyframes swing{ 0%, 100%{ transform: rotate(-30deg); } 5%,45%{ opacity: 0.25; } 0%,45%,100%{ opacity: 1; } 50%{ transform: rotate(30deg); } } .tree li::before{ content: ''; position: absolute; left:-1px; bottom: 1px; width: 3px; height: 3px; } .tree li:nth-child(4n)::before{ background-color: #d8334a; } .tree li:nth-child(4n+1)::before{ background-color: #ffce54; } .tree li:nth-child(4n+2)::before{ background-color: #2ecc71; } .tree li:nth-child(4n+3)::before{ background-color: #5d9cec; } </style> </head> <body> <ul class="tree"> <dis class="start"></dis> </ul> </body> <script> let tree = document.querySelector('.tree'); for(let i = 0;i<128;i++){ let li = document.createElement('li'); li.style="--i:"+i; tree.appendChild(li); } </script> </html>
