jQuery 飘落的枫叶 特效

效果图:

jQuery 飘落的枫叶 特效_第1张图片
飘落的枫叶

素材:


代码:

```html

```

```javascript

// js 核心代码

var d = '';

    setInterval(function () {

        var f = $(document).width();

        var e = Math.random() * f - 300; // 枫叶的定位left值

        var o = 0.2 + Math.random(); // 枫叶的透明度

        var w = 25 + Math.random() * 10; // 枫叶大小

        var l = e - 100 + 200 * Math.random(); // 枫叶的横向位移

        var k = 8000 + 5000 * Math.random();

        var deg = Math.random() * 360; // 枫叶的方向

        $(d).clone().appendTo(".maplebg").css({

            left: e + "px",

            opacity: o,

            transform: "rotate(" + deg + "deg)",

            "width": w,

        }).animate({

            top: "550px", // 高度

            left: l + "px",

            opacity: 0.1,

        }, k, "linear", function () {

            $(this).remove()

        })

    }, 500)

```

你可能感兴趣的:(jQuery 飘落的枫叶 特效)