雪花飘落特效

admin

撰写于 2022年 08月 30 日

雪花飘落特效

只需要简单加载一个JS 不需要复杂的去加载CSS。或者别的

直接上代码 把这个放进头部就可以了

  /// <reference path="jquery-1.10.2.min.js" />
  ///
  ///
  var minSize = 5;
  var maxSize = 20;
  var newOn = 280;
  var flake = $("<div></div>").css({ "position": "absolute", "top": "-50px" }).html("❅");
  $(function () {


    var documentHeight = $(document).height();
    var documentWidth = $(document).width();
    setInterval(function () {
    var startPositionLeft = Math.random() * documentWidth;
    var sizeFlake = minSize + Math.random() * maxSize;
    var endPositionLeft = Math.random() * documentWidth;
    var durationFall = documentHeight * 15 + Math.random() * 3000;
    var startOpacity = 0.7 + 0.3 * Math.random();
    var endOpacity = 1.5 * Math.random();
    flake.clone().appendTo($("body")).css({
        "left": startPositionLeft,
        "opacity": startOpacity,
        "font-size": sizeFlake,
        "color": "#aadff1"
    }).animate({
        "top": documentHeight - 40,
        "left": endPositionLeft,
        "opacity": endOpacity
    }, durationFall, function () {
        $(this).remove();
    });
    }, newOn);
    });

记得加载jquery 如果有加载就不需要再加载了！

效果如下