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

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

代码语言：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.zInd.........完整代码请登录后点击上方下载按钮下载查看