本文主要是介绍网页版圣诞节贺卡源码超漂亮HTML版圣诞节贺卡送女朋友圣诞节贺卡源码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
网页版圣诞节贺卡源码超漂亮HTML版圣诞节贺卡送女朋友圣诞节贺卡源码
运行截屏：
核心代码
function snow() {// 1、定义一片雪花模板var flake = document.createElement("div");// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺flake.innerHTML = "❆";flake.style.cssText = "position:absolute;color:#fff;";//获取页面的高度 相当于雪花下落结束时Y轴的位置var documentHieght = window.innerHeight;//获取页面的宽度，利用这个数来算出，雪花开始时left的值var documentWidth = window.innerWidth;//定义生成一片雪花的毫秒数var millisec = 100;//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；setInterval(function () {//页面加载之后，定时器就开始工作//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置var startLeft = Math.random() * documentWidth;//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置var endLeft = Math.random() * documentWidth;//随机生成雪花大小var flakeSize = 5 + 20 * Math.random();//随机生成雪花下落持续时间var durationTime = 4000 + 7000 * Math.random();//随机生成雪花下落 开始 时的透明度var startOpacity = 0.7 + 0.3 * Math.random();//随机生成雪花下落 结束 时的透明度var endOpacity = 0.2 + 0.2 * Math.random();//克隆一个雪花模板var cloneFlake = flake.cloneNode(true);//第一次修改样式，定义克隆出来的雪花的样式cloneFlake.style.cssText += `left: ${startLeft}px;opacity: ${startOpacity};font-size:${flakeSize}px;top:-25px;transition:${durationTime}ms;`;//拼接到页面中document.body.appendChild(cloneFlake);//设置第二个定时器，一次性定时器，//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；setTimeout(function () {//第二次修改样式cloneFlake.style.cssText += `left: ${endLeft}px;top:${documentHieght}px;opacity:${endOpacity};`;//4、设置第三个定时器，当雪花落下后，删除雪花。setTimeout(function () {cloneFlake.remove();}, durationTime);}, 0);}, millisec);}snow();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 = 201;// gsap动画库gsap.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");var treeBottomPath = getSVGPoints(".treeBottomPath");//console.log(starPath.length)var mainTl = gsap.timeline({ delay: 0, repeat: 0 }),starTl;//tl.seek(100).timeScale(1.82)function flicker(p) {//console.log("flivker")gsap.killTweensOf(p, { opacity: true });gsap.fromTo(p,{opacity: 1,},{duration: 0.07,opacity: Math.random(),repeat: -1,});}完整代码下载地址：送女朋友圣诞节贺卡源码
这篇关于网页版圣诞节贺卡源码超漂亮HTML版圣诞节贺卡送女朋友圣诞节贺卡源码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
