canvas情人节快乐长条生长动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas情人节快乐长条生长动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { background-color: #000; } body, html, .happy-valentines { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .happy-valentines { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; position: absolute; text-align: center; top: 100px; margin: -0.5em auto 0 auto; color: #ff81fc; -webkit-text-shadow: 0 -1px 1px #fff, 0 1px 1px #fff; -moz-text-shadow: 0 -1px 1px #fff, 0 1px 1px #fff; text-shadow: 0 -1px 1px #fff, 0 1px 1px #fff; font-family: 'La Belle Aurore', cursive; opacity: 0; font-size: 10em; -webkit-filter: blur(0.2em); } .happy-valentines:hover, .start { opacity: 1; font-size: 2em; -webkit-filter: blur(0.02em); -moz-filter: blur(0.02em); filter: blur(0.02em); } .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; } .dribbble img { display: block; height: 28px; } .twitter { position: fixed; display: block; right: 64px; bottom: 14px; } .twitter svg { width: 32px; height: 32px; fill: #1da1f2; } </style> </head> <body > <link href='https://fonts.googleapis.com/css?family=La+Belle+Aurore' rel='stylesheet' type='text/css'> <canvas id="nCanvasRender"></canvas> <div id="nValentinesText" class="happy-valentines start"> Happy Valentines Day </div> <script > (function() { // Hungarian notation // (http://en.wikipedia.org/wiki/Hungarian_notation) // n - HTML-Node // o - object // s - string // i - integer // a - array // b - boolean // f - float // p - Particle // fn - function // ctx - 2D Context // General Functions var app, fnAddEventListener, fnRequestAnimationFrame; fnRequestAnimationFrame = function(fnCallback) { var fnAnimFrame; fnAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(fnCallback) { window.setTimeOut(fnCallback, 1000 / 60); }; fnAnimFrame(fnCallback); }; // Add Event Listener fnAddEventListener = function(o, sEvent, fn) { if (o.addEventListener) { o.addEventListener(sEvent, fn, false); } else { o['on' + sEvent] = fn; } }; app = function() { var Particle, ctxRender, fPI, fnCos, fnNextFrame, fnRender, fnRnd, fnSetSize, fnSin, fnSwapList, fnTextFadeOut, h, nBody, oBuffer, oDoc, oRender, w; // General Elements oDoc = document; nBody = oDoc.body; fPI = Math.PI; fnRnd = Math.random; fnCos = Math.cos; fnSin = Math.sin; fnTextFadeOut = function() { nValentinesText.setAttribute('class', 'happy-valentines'); }; setTimeout(fnTextFadeOut, 3000); ctxRender = nCanvasRender.getContext('2d'); oRender = { pFirst: null }; oBuffer = { pFirst: null }; w = h = 0; // gets/sets size fnSetSize = function() { nCanvasRender.width = w = window.innerWidth; nCanvasRender.height = h = 400; // window.innerHeight return { w: w, h: h }; }; fnSetSize(); // window.onresize fnAddEventListener(window, 'resize', fnSetSize); fnSwapList = function(p, oSrc, oDst) { if (p != null) { // remove p from oSrc if (oSrc.pFirst === p) { oSrc.pFirst = p.pNext; if (p.pNext != null) { p.pNext.pPrev = null; } } else { p.pPrev.pNext = p.pNext; if (p.pNext != null) { p.pNext.pPrev = p.pPrev; } } } else { // create new p p = new Particle(); } p.pNext = oDst.pFirst; if (oDst.pFirst != null) { oDst.pFirst.pPrev = p; } oDst.pFirst = p; p.pPrev = null; return p; }; Particle = (function() { var bIsDead; // Particle class Particle { fnInit() { var fAngle, fForce, iRndColor, p; p = this; iRndColor = ~~(fnRnd() * 128); p.aColor = [128 + iRndColor, 0 + iRndColor, 0 + iRndColor, 1]; fAngle = fnRnd() * fPI * 2; fForce = 1 + 0.5 * fnRnd(); p.bIsDead = false; p.iPosition = fnRnd() < 0.5 ? 1 : -1; p.iFramesAlive = 0; p.fX = (w / 2) + 150 * p.iPosition; p.fY = 0; p.fVX = fForce * fnCos(fAngle); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0