js实现蒲公英飞舞动画效果代码

代码语言:html

所属分类:粒子

代码描述:js实现蒲公英飞舞动画效果代码

代码标签: 飞舞 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">
        .custom-background{
            height: 100vh;
            width: 100vw;
        	background-image:url('//repo.bfw.wiki/bfwrepo/image/5e44fafbdc615.png');
        	background-size:cover;
        	background-repeat:no-repeat;
        
        }
    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>

<body class="custom-background">

    <div class="snow-container" style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:100001;"></div>

    <script type="text/javascript">
        // snow
    var THREE = THREE || {};
    if (!self.Int32Array) self.Int32Array = Array, self.Float32Array = Array;
    THREE.Color = function(a) {
        a !== void 0 && this.setHex(a);
        return this
    };
    THREE.Color.prototype = {
        constructor: THREE.Color,
        r: 1,
        g: 1,
        b: 1,
        copy: function(a) {
            this.r = a.r;
            this.g = a.g;
            this.b = a.b;
            return this
        },
        copyGammaToLinear: function(a) {
            this.r = a.r * a.r;
            this.g = a.g * a.g;
            this.b = a.b * a.b;
            return this
        },
        copyLinearToGamma: function(a) {
            this.r = Math.sqrt(a.r);
            this.g = Math.sqrt(a.g);
            this.b = Math.sqrt(a.b);
            return this
        },
        setRGB: function(a, b, c) {
            this.r = a;
            this.g = b;
            this.b = c;
            return this
        },
        setHSV: function(a, b, c) {
            var d, f, e;
            if (c === 0) this.r = this.g = this.b = 0;
            else switch (d = Math.floor(a * 6), f = a * 6 - d, a = c * (1 - b), e = c * (1 - b * f), b = c * (1 - b * (1 - f)), d) {
                case 1:
                    this.r = e;
                    this.g = c;
                    this.b = a;
                    break;
                case 2:
                    this.r = a;
                    this.g = c;
                    this.b = b;
                    break;
                case 3:
                    this.r = a;
                    this.g = e;
                    this.b = c;
                    break;
                case 4:
                    this.r = b;
                    this.g = a;
                    this.b = c;
                    break;
                case 5:
                    this.r = c;
                    this.g = a;
                    this.b = e;
                    break;
                case 6:
                case 0:
                    this.r = c, this.g = b, this.b = a
            }
            return this
        },
        setHex: function(a) {
            a = Math.floor(a);
            this.r = (a >> 16 & 255) / 255;
            this.g = (a >> 8 & 255) / 255;
            this.b = (a & 255) / 255;
            return this
        },
        getHex: function() {
            return ~~(this.r * 255) << 16 ^ ~~(this.g * 255) << 8 ^ ~~(this.b * 255)
        },
        getContextStyle: function() {
            return "rgb(" + Math.floor(this.r * 255) + "," + Math.floor(this.g * 255) + "," + Math.floor(this.b * 255) + ")"
        },
        clone: function() {
            return (new THREE.Color).setRGB(this.r, this.g, this.b)
        }
    };
    THREE.Vector2 = function(a, b) {
        this.x = a || 0;
        this.y = b || 0
    };
    THREE.Vector2.prototype = {
        constructor: THREE.Vector2,
        set: function(a, b) {
            this.x = a;
            this.y = b;
            return this
        },
        copy: function(a) {
            this.x = a.x;
            this.y = a.y;
            return this
        },
        clone: function() {
            return new THREE.Vector2(this.x, this.y)
        },
        add: function(a, b) {
            this.x = a.x + b.x;
            this.y = a.y + b.y;
            return this
        },
        addSelf: function(a) {
            this.x += a.x;
            this.y += a.y;
            return this
        },
        sub: function(a, b) {
            this.x = a.x - b.x;
            this.y = a.y - b.y;
            return this
        },
        subSelf: function(a) {
            this.x -= a.x;
            this.y -= a.y;
            return this
        },
        multiplyScalar: function(a) {
            this.x *= a;
            this.y *= a;
            return this
        },
        divideScalar: function(a) {
            a ? (this.x /= a, this.y /= a) : this.set(0, 0);
            return this
        },
        negate: function() {
            return this.multiplyScalar(-1)
        },
        dot: function(a) {
            return this.x * a.x + this.y * a.y
        },
        lengthSq: function() {
            return this.x * this.x + this.y * this.y
        },
        length: function() {
            return Math.sqrt(this.lengthSq())
        },
        normalize: function() {
            return this.divideScalar(this.length())
        },
        distanceTo: function(a) {
            return Math.sqrt(this.distanceToSquared(a))
        },
        distanceToSquared: function(a) {
            var b = this.x - a.x,
                a = this.y - a.y;
            return b * b + a * a
        },
        setLength: function(a) {
            return this.normalize().multiplyScalar(a)
        },
        equals: function(a) {
            return a.x === this.x && a.y === this.y
        }
    };
    THREE.Vector3 = function(a, b, c) {
        this.x = a || 0;
        this.y = b || 0;
        this.z = c || 0
    };
    THREE.Vector3.prototype = {
        constructor: THREE.Vector3,
        set: function(a, b, c) {
            this.x = a;
            this.y = b;
            this.z = c;
            return this
        },
        setX: function(a) {
            this.x = a;
            return this
        },
        setY: function(a) {
            this.y = a;
            return this
        },
        setZ: function(a) {
            this.z = a;
            return this
        },
        copy: function(a) {
            this.x = a.x;
            this.y = a.y;
            this.z = a.z;
            return this
        },
        clone: function() {
            return new THREE.Vector3(this.x, this.y, this.z)
        },
        add: function(a, b) {
            this.x = a.x + b.x;
            this.y = a.y + b.y;
            this.z = a.z + b.z;
            return this
        },
        addSelf: function(a) {
            this.x += a.x;
            this.y += a.y;
            this.z += a.z;
            return this
        },
        addScalar: function(a) {
            this.x += a;
            this.y += a;
            this.z += a;
            return this
        },
        sub: function(a, b) {
            this.x = a.x - b.x;
            this.y = a.y - b.y;
            this.z = a.z - b.z;
            return this
        },
        subSelf: function(a) {
            this.x -= a.x;
            this.y -= a.y;
            this.z -= a.z;
            return this
        },
        multiply: function(a, b) {
            this.x = a.x * b.x;
            this.y = a.y * b.y;
            this.z = a.z * b.z;
            return this
        },
        multiplySelf: function(a) {
            this.x *= a.x;
            this.y *= a.y;
            this.z *= a.z;
            return this
        },
        multiplyScalar: function(a) {
            this.x *= a;
            this.y *= a;
            this.z *= a;
            return this
        },
        divideSelf: function(a) {
            this.x /= a.x;
            this.y /= a.y;
            this.z /= a.z;
            return this
        },
        divideScalar: function(a) {
            a ? (this.x /= a, this.y /= a, this.z /= a) : this.z = this.y = this.x = 0;
            return this
        },
        negate: function() {
            return this.multiplyScalar(-1)
        },
        dot: function(a) {
            return this.x * a.x + this.y * a.y + this.z * a.z
        },
        lengthSq: function() {
            return this.x * this.x + this.y * this.y + this.z * this.z
        },
        length: function() {
            return Math.sqrt(this.lengthSq())
        },
        lengthManhattan: function() {
            return this.x + this.y + this.z
        },
        normalize: function() {
            return this.divideScalar(this.length())
        },
        setLength: function(a) {
            return this.normalize().multiplyScalar(a)
        },
        cross: function(a, b) {
            this.x = a.y * b.z - a.z * b.y;
            this.y = a.z * b.x - a.x * b.z;
            this.z = a.x * b.y - a.y * b.x;
            return this
        },
        crossSelf: function(a) {
            var b = this.x,
                c = this.y,
                d = this.z;
            this.x = c * a.z - d * a.y;
            this.y = d * a.x - b * a.z;
            this.z = b * a.y - c * a.x;
            return this
        },
        distanceTo: function(a) {
            return Math.sqrt(this.distanceToSquared(a))
        },
        distanceToSquared: function(a) {
            return (new THREE.Vector3).sub(this, a).lengthSq()
        },
        setPositionFromMatrix: function(a) {
            this.x = a.n14;
            this.y = a.n24;
            this.z = a.n34
        },
        setRotationFromMatrix: function(a) {
            var b = Math.cos(this.y);
            this.y = Math.asin(a.n13);
            Math.abs(b) > 1.0E-5 ? (this.x = Math.atan2(-a.n23 / b, a.n33 / b), this.z = Math.atan2(-a.n12 / b, a.n11 / b)) : (this.x = 0, this.z = Math.atan2(a.n21, a.n22))
        },
        isZero: function() {
            return this.lengthSq() < 1.0E-4
        }
    };
    THREE.Vector4 = function(a, b, c, d) {
        this.x = a || 0;
        this.y = b || 0;
        this.z = c || 0;
        this.w = d !== void 0 ? d : 1
    };
    THREE.Vector4.prototype = {
        constructor: THREE.Vector4,
        set: function(a, b, c, d) {
            this.x = a;
            this.y = b;
            this.z = c;
            this.w = d;
            return this
        },
        copy: function(a) {
            this.x = a.x;
            this.y = a.y;
            this.z = a.z;
            this.w = a.w !== void 0 ? a.w : 1
        },
        clone: function() {
            return new THREE.Vector4(this.x, this.y, this.z, this.w)
        },
        add: function(a, b) {
            this.x = a.x + b.x;
            this.y = a.y + b.y;
            this.z = a.z + b.z;
            this.w = a.w + b.w;
            return this
        },
        addSelf: function(a) {
            this.x += a.x;
            this.y += a.y;
            this.z += a.z;
            this.w += a.w;
            return this
        },
        sub: function(a, b) {
            this.x = a.x - b.x;
            this.y = a.y - b.y;
            this.z = a.z - b.z;
            this.w = a.w - b.w;
            return this
        },
        subSelf: function(a) {
            this.x -= a.x;
            this.y -= a.y;
            this.z -= a.z;
            this.w -= a.w;
            return this
        },
        multiplyScalar: function(a) {
            this.x *= a;
            this.y *= a;
            this.z *= a;
            this.w *= a;
            return this
        },
        divideScalar: function(a) {
            a ? (this.x /= a, this.y /= a, this.z /= a, this.w /= a) : (this.z = this.y = this.x = 0, this.w = 1);
            return this
        },
        negate: function() {
            return this.multiplyScalar(-1)
        },
        dot: function(a) {
            return this.x * a.x + this.y * a.y + this.z * a.z + this.w * a.w
        },
        lengthSq: function() {
            return this.dot(this)
        },
        length: function() {
            return Math.sqrt(this.lengthSq())
        },
        normalize: function() {
       .........完整代码请登录后点击上方下载按钮下载查看

网友评论0