canvas光斑点点闪耀动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas光斑点点闪耀动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> @import url(//fonts.googleapis.com/css?family=Poiret+One); body { width:100%; margin:0; overflow:hidden; background:hsla(0,5%,5%,1); background-repeat:no-repeat; background-attachment:fixed; background-image:linear-gradient(to right top,hsla(0,5%,15%,0.5),hsla(0,5%,5%,1)); background-image:-moz-linear-gradient(to right top,hsla(0,5%,15%,0.5),hsla(0,5%,5%,1)); } p { text-align:center; width:100%; color:hsla(0,50%,50%,1); font-size:5em; text-shadow:1px 1px hsla(0,0%,5%,1),-1px -1px hsla(0,0%,5%,1); font-family:'Poiret One',cursive; letter-spacing:0.75rem; text-align:center; position:relative; margin-top:40vh; } </style> </head> <body> <canvas id="canv"></canvas> <p>BFW</p> <script> window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var c = document.getElementById('canv'); var $ = c.getContext('2d'); var w = c.width = window.innerWidth; var h = c.height = window.innerHeight; var _w = w * 0.5; var _h = h * 0.5; var arr = []; var cnt = 0; window.addEventListener('load', resize); window.addEventListener('resize', resize, false).........完整代码请登录后点击上方下载按钮下载查看
网友评论0