canvas实现炫酷丝滑彩带线条跟随鼠标绘制动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas实现炫酷丝滑彩带线条跟随鼠标绘制动画效果代码

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

<!DOCTYPE html>
<html>

<head>


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

        <style type="text/css">
            * {
    	margin:0;
    	padding:0;
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	-ms-box-sizing:border-box;
    	-o-box-sizing:border-box;
    	box-sizing:border-box;
    }
    html,body {
    	margin:0;
    	padding:0;
    	color:#fefeff;
    	-webkit-font-smoothing:antialiased;
    	font-smoothing:antialiased;
    }
    body {
    	font-family:"Microsoft YaHei";
    	background:rgb(8,5,16);
    	overflow:hidden;
    	-webkit-touch-callout:none;
    	-webkit-user-select:none;
    	-khtml-user-select:none;
    	-moz-user-select:none;
    	-ms-user-select:none;
    	user-select:none;
    }
    h1 {
    	font:2.75em;
    	font-weight:400;
    	letter-spacing:0.35em;
    	text-shadow:0 0 25px rgba(254,254,255,0.85);
    }
    h2 {
    	font:1.45em;
    	font-weight:400;
    	letter-spacing:0.5em;
    	text-shadow:0 0 25px rgba(254,254,255,0.85);
    	text-transform:lowercase;
    }
    [class^="letter"] {
    	-webkit-transition:opacity 3s ease;
    	-moz-transition:opacity 3s ease;
    	transition:opacity 3s ease;
    }
    .letter-0 {
    	transition-delay:0.2s;
    }
    .letter-1 {
    	transition-delay:0.4s;
    }
    .letter-2 {
    	transition-delay:0.6s;
    }
    .letter-3 {
    	transition-delay:0.8s;
    }
    .letter-4 {
    	transition-delay:1.0s;
    }
    .letter-5 {
    	transition-delay:1.2s;
    }
    .letter-6 {
    	transition-delay:1.4s;
    }
    .letter-7 {
    	transition-delay:1.6s;
    }
    .letter-8 {
    	transition-delay:1.8s;
    }
    .letter-9 {
    	transition-delay:2.0s;
    }
    .letter-10 {
    	transition-delay:2.2s;
    }
    .letter-11 {
    	transition-delay:2.4s;
    }
    .letter-12 {
    	transition-delay:2.6s;
    }
    .letter-13 {
    	transition-delay:2.8s;
    }
    .letter-14 {
    	transition-delay:3.0s;
    }
    h1,h2 {
    	visibility:hidden;
    	-webkit-transform:translate3d(0,0,0);
    	-moz-transform:translate3d(0,0,0);
    	transform:translate3d(0,0,0);
    }
    h1.transition-in,h2.transition-in {
    	visibility:visible;
    }
    h1 [class^="letter"],h2 [class^="letter"] {
    	opacity:0;
    }
    h1.transition-in [class^="letter"],h2.transition-in [class^="letter"] {
    	opacity:1;
    }
    #container {
    	display:table;
    	position:absolute;
    	z-index:20;
    	width:100%;
    	height:100%;
    	text-align:center;
    	cursor:none;
    	left:15px;
    }
    #container >div {
    	display:table-cell;
    	vertical-align:middle;
    }
    #container p {
    	position:absolute;
    	width:100%;
    	left:0;
    	bottom:25px;
    	font-size:0.8em;
    	letter-spacing:0.1em;
    	font-weight:300;
    	color:#76747a;
    	-webkit-font-smoothing:subpixel-antialiased;
    	font-smoothing:subpixel-antialiased;
    }
    #container p strong {
    	color:#b3abc5;
    	font-size:5em;
    }
    #container p span {
    	font-size:0.75em;
    	padding:0 2px;
    }
    #canvas {
    	position:absolute;
    	z-index:10;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	cursor:none;
    }
    #stats {
    	position:absolute;
    	z-index:10;
    	left:10px;
    	top:10px;
    }
    .dg.ac {
    	z-index:100 !important;
    }
    #container div p strong a {
    	color:#999;
    	font-size:0.5em;
    }
    body,td,th {
    	}a:link {
    	text-decoration:none;
    }
    a:visited {
    	text-decoration:none;
    }
    a:hover {
    	text-decoration:none;
    }
    a:active {
    	text-decoration:none;
    }
        </style>
    </head>

    <body ondragstart="window.event.returnValue=false" oncontextmenu="window.event.returnValue=false" onselectstart="event.returnValue=false">
        <div id="container">
            <div>
                <h1 id="h1">TITLE</h1>
                <h2 id="h2">Phasellus enim libero</h2>

                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
        </div><canvas id="canvas"></canvas>
        <script>
            var Stats = function() {
    var M = Date.now(),
        G = M,
        q = 0,
        z = 1 / 0,
        C = 0,
        E = 0,
        A = 1 / 0,
        D = 0,
        w = 0,
        k = 0,
        K = document.createElement("div");
    K.id = "stats", K.addEventListener("mousedown", function(a) {
        a.preventDefault(), I(++k % 2)
    }, !1), K.style.cssText = "width:80px;opacity:0.9;cursor:pointer";
    var H = document.createElement("div");
    H.id = "fps", H.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", K.appendChild(H);
    var L = document.createElement("div");
    L.id = "fpsText", L.style.cssText = "color:#0ff;font-size:9px;font-weight:bold;line-height:15px", L.innerHTML = "FPS", H.appendChild(L);
    var B = document.createElement("div");
    for (B.id = "fpsGraph", B.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", H.appendChild(B); 74 > B.children.length;) {
        var N = document.createElement("span");
        N.style.cssText = "width:1px;height:30px;float:left;background-color:#113", B.appendChild(N)
    }
    var x = document.createElement("div");
    x.id = "ms", x.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", K.appendChild(x);
    var j = document.createElement("div");
    j.id = "msText", j.style.cssText = "color:#0f0;;font-size:9px;font-weight:bold;line-height:15px", j.innerHTML = "MS", x.appendChild(j);
    var J = document.createElement("div");
    for (J.id = "msGraph", J.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", x.appendChild(J); 74 > J.children.length;) {
        var N = document.createElement("span");
        N.style.cssText = "width:1px;height:30px;float:left;background-color:#131", J.appendChild(N)
    }
    var I = function(a) {
            switch (k = a) {
                case 0:
                    H.style.display = "block", x.style.display = "none";
                    break;
                case 1:
                    H.style.display = "none", x.style.display = "block"
            }
        },
        F = function(a, c) {
            var b = a.appendChild(a.firstChild);
            b.style.height = c + "px"
        };
    return {
        REVISION: 11,
        domElement: K,
        setMode: I,
        begin: function() {
            M = Date.now()
        },
        end: function() {
            var a = Date.now();
            return q = a - M, z = Math.min(z, q), C = Math.max(C, q), j.textContent = q + " MS (" + z + "-" + C + ")", F(J, Math.min(30, 30 - 30 * (q / 200))), w++, a > G + 1000 && (E = Math.round(1000 * w / (a - G)), A = Math.min(A, E), D = Math.max(D, E), L.textContent = E + " FPS (" + A + "-" + D + ")", F(B, Math.min(30, 30 - 30 * (E / 100))), G = a, w = 0), a
        },
        update: function() {
            M = this.end()
        }
    }
};
(function(r) {
    var t, v, d, u, s, n = {},
        p = [],
        k = {};
    k.debug = true;
    k.friction = 0.5;
    k.trails = 20;
    k.size = 50;
    k.dampening = 0.25;
    k.tension = 0.98;
    Math.TWO_PI = Math.PI * 2;

    function g(w) {
        this.init(w || {})
    }
    g.prototype = (function() {
        var w = 0;
        return {
            init: function(x) {
                this.p.........完整代码请登录后点击上方下载按钮下载查看