最经看到最多的就是圣诞树的实现！今天的排行榜是Python实现圣诞树，明天是C语言实现圣诞树。
大家都太卷了，唉！！！
虽然本人并不喜欢过西方的节日，但是还是在此祝各位圣诞节快乐，
并在文章结尾为大家准备了福利❤️殺
⬇️下面，我将为大家献上圣诞节干货。

HTML代码部分

  
  
  


    


          
          
Merry

    
    


        
Christmas

    
    


        

        

        

    
    
    
    
    
    
    
    
    
    
    
    
    
    
        
        
        
    

CSS代码部分

@import url("https://fonts.googleapis.com/css2?family=Vujahday+script&display=swap");
html {
  box-sizing: border-box;
  font-size: 4em; }

*, *:before, *:after {
  box-sizing: inherit; }

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
  text-align:center ;
  }

ol, ul {
  list-style: none;
  }

img {
  max-width: 100%;
  height: auto;
  }

body {
  font-family: 'Vujahday script', cursive;
  background-color: #2b2b2b;
  }

.container1 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin-top: 5%;
  }
  .container1 .combos {
    position: relative;
    width: 150px;
    height: auto;
    left: 100;
    }
    .container1 .combos .bell {
      position: relative;
      }

.container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  }

@keyframes neonRed {
  0% {
    filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 8px #2d92ff) drop-shadow(0px 0px 10px #56a8ff) drop-shadow(0px 0px 15px #94c8ff);
    }
  100% {
    stroke: #94c8ff;
    filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff);
    }
  }

.snowflakes {
  display: flex;
  justify-content: center;
  }
  .snowflakes .snowflake {
    position: relative;
    width: 100px;
    height: auto;
    fill: none;
    stroke-width: 3;
    stroke: #717171;
    filter: 'drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff)';
align-self: flex-start;
}

.merryChristmas {
  animation: neonAnim 2s infinite alternate;
  }

@keyframes neonAnim {
  from {
    text-shadow: 0 0 15px rgba(210, 4, 45, 0.7), 0 0 45px rgba(210, 4, 45, 0.7), 0 0 105px rgba(210, 4, 45, 0.7);
  }
  to {
    text-shadow: 0 0 10px rgba(210, 4, 45, 0.7), 0 0 25px rgba(210, 4, 45, 0.7), 0 0 65px rgba(210, 4, 45, 0.7);
  }
}

h2 {
  padding: .2em;
  transform: rotate(-5deg);
   }

JS代码部分

let merryChristmas = [document.getElementsByClassName('merrychristmas'), document.getElementsByClassName('christmas')]
let snowFlake = document.getElementsByClassName('snowflake')
let bell = document.getElementsByClassName('bell')

var tl = gsap.timeline({repeat: -1});
var tl2 = gsap.timeline({repeat: -1});
var tl3 = gsap.timeline({repeat: -1});
let neonLetters = 'neonAnim 1s alternate infinite'

let filters1 = 'drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff)';
let filters2 = 'drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225)'


tl.to(snowFlake[0], {stroke: '#94c8ff', filter: filters1, stagger: .5, duration: .3})
.to(snowFlake[0], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3})
.to(snowFlake[1], {stroke: '#94c8ff', filter: filters1, stagger: .5, duration: .3})
.to(snowFlake[1], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3})
.to(snowFlake[2], {stroke: '#94c8ff', filter: filters1, duration: .3})
.to(snowFlake[2], {stroke: '#717171', filter: 'none', duration: .3})

tl2.to(bell[1], {stroke: '#e1c225', filter: filters2, stagger: .5, duration: .3})
.to(bell[1], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3})
.to(bell[2], {stroke: '#e1c225', filter: filters2, stagger: .5, duration: .3})
.to(bell[2], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3})

merryChristmas.forEach(a => {
    tl3.to(a,{animation: neonLetters, color: '#D2042D', duration: .4})
    .to(a,{animation: neonLetters, color: '#D2042D', duration: 1})
    .to(a, {animation: '', color: '#858585', duration: .2})
})

最后，再次祝福大家，节日快乐！
喜欢该文章的话，欢迎大家一键三连！！
在此给大家推荐一个前端学习（干货）网址➡️ https://codepen.io