jquery实现彩色方块圈圈组成爱心粒子loading加载动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：jquery实现彩色方块圈圈组成爱心粒子loading加载动画效果代码

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">


    <style>
        @import url(https://fonts.googleapis.com/css?family=Lato:900);

        *, *:after, *:before {
            box-sizing: border-box;
        }

        html {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            -webkit-user-select: none;
            -moz-user-select: none;
        }

        .tweets {
            width: 100%;
            height: auto;
            position: absolute;
            top: calc(80% - 50px);
            left: 0;
            margin: 0;
            font-size: 1.4em;
            z-index: 1;
        }

        .mentions {
            color: rgb(200, 200, 200);
            font-family: 'Lato';
            text-align: center;
            padding-left: 5px;
        }
    </style>
</head>
<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>

    <div class="tweets"><p class="mentions">正在加载…</p></div>


    <script type="text/javascript">
        ; $(function ($) {

            var canvas, context, audioContext, buffer, particles = [], tweets, mouse = { x: -99999, y: -99999 }, line = [{ x: 0, y: 0 }], type = ['circle', 'rumble'], nextTweet = 0, isLoading = explosion = true, input = release = played = false, lastDownload = $.now(), FPS = 60;

            /*
             * Custom tween.
             */

            var tween = {

                x: Math.random() * innerWidth,
                y: Math.random() * innerWidth

            }, target;

            /*
             * List colors.
             */

            var colors = [

                '#0f628b',
            '#ccdff0',
            '#66ebff',
            '#ffffff',
            '#f0ff00'

            ];

            /*
            * Init.
             */

            function init() {

                var body = document.querySelector('body');

                canvas = document.createElement('canvas');

                canvas.width = innerWidth;
                canvas.height = innerHeight;

                canvas.style.background = '-webkit-radial-gradient(#17cbcb, #018181)';
                canvas.style.background = '-moz-radial-gradient(#17cbcb, #018181)';
                canvas.style.background = '-ms-radial-gradient(#17cbcb, #018181)';
                canvas.style.background = '-o-radial-gradient(#17cbcb, #018181)';
                canvas.style.background = 'radial-gradient(#17cbcb, #018181)';

                canvas.style.position = 'absolute';
                canvas.style.top = 0;
                canvas.style.bottom = 0;
                canvas.style.left = 0;
                canvas.style.right = 0;
                canvas.style.zIndex = -1;

                body.appendChild(canvas);

                // Browser supports canvas?
                if (!!(capable)) {

                    context = canvas.getContext('2d');

                    // Events
                    if ('ontouchmove' in window) {

                        document.addEventListener('touchstart', self.onTouchStart, false);
                        document.addEventListener('touchmove', self.onTouchMove, false);

                    }

                    else {

                        document.addEventListener('mousedown', onMouseDown, false);
                        document.addEventListener('mousemove', onMouseMove, false);

                    }

                    window.onresize = onResize;

                    // Todo
                    preloadAudio();
                    createParticles();

                }

                else {

                    console.error('Sorry, your browser sucks :(');

                }

            }

            /*
             * Checks if browser supports canvas element.
             */

            function capable() {

                return canvas.getContext && canvas.getContext('2d');

            }

            /*
             * On resize window event.
             */

            function onResize() {

                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;

            }

            /*
             * Mouse down event.
             */

            function onMouseDown(event) {

                event.preventDefault();

                mouse.x = event.pageX - canvas.offsetLeft;
                mouse.y = event.pageY - canvas.offsetTop;

                restoreDefault();

            }

            /*
             * Mouse move event.
             */

            function onMouseMove(event) {

                event.preventDefault();

                mouse.x = event.pageX - canvas.offsetLeft;
                mouse.y = event.pageY - canvas.offsetTop;

            }

            /*
             * Touch start event.
             */

            function onTouchStart(event) {

                event.preventDefault();

                mouse.x = event.touches[0].pageX - canvas.offsetLeft;
                mouse.y = event.touches[0].pageY - canvas.offsetTop;

                restoreDefault();

            }

            /*
             * Touch move event.
             */

            function onTouchMove(event) {

                event.preventDefault();

                mouse.x = event.touches[0].pageX - canvas.offsetLeft;
                mouse.y = event.touches[0].pageY - canvas.offsetTop;

            }

            /*
             * Handle the animation on click/touch event.
             */

            function restoreDefault() {

                if (!release)

                    return;

                if (!input && release) {

                    tween.x = mouse.x;
                    tween.y = mouse.y;

                    line = [{ x: 0, y: 0 }];

                    target = randomBetween(0, particles.length - 1);
                    explosion = input = true;

                    played = false;

                    [].forEach.call(particles, function (particle, index) {

                        particle.radius = particle.copyRadius;

                    });

                }

            }

            /*
             * Get the audio file via Ajax.
             */

            function preloadAudio() {

                try {

                    audioContext = new (window.AudioContext || window.webkitAudioContext)();
                    var request = new XMLHttpRequest();

                    request.open('GET', 'http://francescotrillini.it/assets/pop.ogg', true);
                    request.responseType = 'arraybuffer';

                    request.onload = function () {

                        audioContext.decodeAudioData(request.response, function (chunk) {

                            buffer = chunk;

                        }, function () {

                            $.error('Failed to get audio file :(');

                        });

                    };

                    request.send();

                }

                catch (Exception) {

                    alert("Your browser doesn't support Web Audio API. Try with Safari or Chrome.");

                }

            }

            /*
             * Create particles.
             */

            function createParticles() {

                for (var particle = 0, len = 100; particle < len; particle++) {

                    var x, y, shape, radius;

                    x = canvas.width * 0.5;
                    y = canvas.height * 0.5;

                    shape = type[~~(Math.random() * type.length)];
                    radius = shape === 'circle' ? randomBetween(1, 6) : randomBetween(1, 6) * 2;

                    particles.push({

                        x: x,
                        y: y,
                        goalX: x,
                        goalY: y,
                        centerX: (innerWidth || canvas.width) * 0.5 + 180 * Math.pow(Math.sin(particle), 3),
                        centerY: 250 + 10 * (-(15 * Math.cos(particle) - 5 * Math.cos(2 * particle) - 2 * Math.cos(3 * particle) - Math.cos(4 * particle))),

                        vx: 0,
                        vy: 0,

                        radius: radius,
                        copyRadius: radius,
                        towardsRadius: shape === 'circle' ? 80 : 140,
                        color: colors[~~(Math.random() * colors.length)],
                        alpha: 0.0,

                        orbit: 5,
                        speed: 0.06 + Math.random() * 0.08,
                        angle: 0,

                        type: shape

                    });

                }

                target = randomBetween(0, particles.length - 1);

                loop();

            }

            /*
             * Download tweets.
             */

            function downloadTweets() {

                // Schedule every 60 secs
                if (tweets === undef.........完整代码请登录后点击上方下载按钮下载查看