程序员祝福圣诞快乐的方式（内涵完整代码）

2022年圣诞节到来啦，很高兴这次我们又能一起度过~

这次利用前端的一些简单的代码给不会前端的广大男性朋友知道如何哄对象❤️

一、前言

圣诞将至，玩计算的大家还在发愁如何实现自己送个心爱的那个女孩什么礼物吗？

先送上一个简单的圣诞树吧！

二、创意名

属于程序员的圣诞树

三、效果展示

四、编码实现

HTML代码：

    <!---->  

CSS代码：

body {background-color:#151522;overflow: hidden;display: flex;align-items: center;justify-content: center; }body,html {height: 100%;width: 100%;margin: 0;padding: 0;}svg{width:90%;height:90%;visibility:hidden; }.sparkle{/* mix-blend-mode:luminosity */}

js代码：

MorphSVGPlugin.convertToPath('polygon');var xmlns = "http://www.w3.org/2000/svg",xlinkns = "http://www.w3.org/1999/xlink",select = function(s) {return document.querySelector(s);},selectAll = function(s) {return document.querySelectorAll(s);},pContainer = select('.pContainer'),mainSVG = select('.mainSVG'),star = select('#star'),sparkle = select('.sparkle'),tree = select('#tree'),showParticle = true,particleColorArray = ['#E8F6F8', '#ACE8F8', '#F6FBFE','#A2CBDC','#B74551', '#5DBA72', '#910B28', '#910B28', '#446D39'],particleTypeArray = ['#star','#circ','#cross','#heart'], // particleTypeArray = ['#star'],particlePool = [],particleCount = 0,numParticles = 201gsap.set('svg', {visibility: 'visible'})gsap.set(sparkle, {transformOrigin:'50% 50%',y:-100})let getSVGPoints = (path) => {let arr = []var rawPath = MotionPathPlugin.getRawPath(path)[0];rawPath.forEach((el, value) => {let obj = {}obj.x = rawPath[value * 2]obj.y = rawPath[(value * 2) + 1]if(value % 2) {arr.push(obj)}//console.log(value)})return arr;}let treePath = getSVGPoints('.treePath'),treeBottomPath = getSVGPoints('.treeBottomPath'),mainTl = gsap.timeline({delay:0, repeat:0}),starTl;function flicker(p){gsap.killTweensOf(p, {opacity:true});gsap.fromTo(p, {opacity:1}, {duration: 0.07,opacity:Math.random(),repeat:-1})}function createParticles() {var i = numParticles, p, particleTl, step = numParticles/treePath.length, pos;while (--i > -1) {p = select(particleTypeArray[i%particleTypeArray.length]).cloneNode(true);mainSVG.appendChild(p);p.setAttribute('fill', particleColorArray[i % particleColorArray.length]);p.setAttribute('class', "particle"); particlePool.push(p);//hide them initiallygsap.set(p, { x:-100,y:-100, transformOrigin:'50% 50%' })}}var getScale = gsap.utils.random(0.5, 3, 0.001, true);function playParticle(p){if(!showParticle){return};var p = particlePool[particleCount] gsap.set(p, { x: gsap.getProperty('.pContainer', 'x'), y: gsap.getProperty('.pContainer', 'y'), scale:getScale()});var tl = gsap.timeline();tl.to(p, {duration: gsap.utils.random(0.61,6),physics2D: {velocity: gsap.utils.random(-23, 23),angle:gsap.utils.random(-180, 180),gravity:gsap.utils.random(-6, 50)},scale:0,rotation:gsap.utils.random(-123,360),ease: 'power1',onStart:flicker,onStartParams:[p],onRepeat: (p) => {gsap.set(p, { scale:getScale()})},onRepeatParams: [p]});particleCount++;particleCount = (particleCount >=numParticles) " />

写在最后：

希望屏幕前看见这篇文章的大佬多多指教，学生刚阳，还没缓过来，目前就是简单主要以代码为主，欢迎大家多多交流！

希望大家都有一个好的圣诞节！

祝愿大家幸福安康！