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,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0