js实现canvas鼠标移动绘制优美曲线动画效果代码-html代码-BFW代码库

js实现canvas鼠标移动绘制优美曲线动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现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;
        	font: 16px/1.4 'Lato', sans-serif;
        	color: #fefeff;
        	-webkit-font-smoothing: antialiased;
        	font-smoothing: antialiased;
        }
        body {
        	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 'Cinzel', serif;
        	font-weight: 400;
        	letter-spacing: 0.35em;
        	text-shadow: 0 0 25px rgba(254,254,255,0.85);
        }
        h2 {
        	font: 1.45em 'Cinzel', serif;
        	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,.........完整代码请登录后点击上方下载按钮下载查看