canvas光斑点点闪耀动画效果代码

代码语言:html

所属分类:动画

代码描述:canvas光斑点点闪耀动画效果代码

代码标签: 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