网页版圣诞节贺卡源码超漂亮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,
        }
      );
    }

完整代码下载地址：送女朋友圣诞节贺卡源码