html 代码
- <!doctype html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
- <title > 星空特效, 宇宙特效 </title>
- <meta name="description" content="">
- <meta name="keywords" content=" " />
- <script type="text/javascript" src="http://www.linked-f.com/js/jquery.min.js"></script>
- <style type="text/CSS">
- /* 通用页面结构 */
- html,body{margin: 0;padding: 0;}
- body{color: #777777; font-family: 'Microsoft YaHei'; font-size: 14px;}
- .page_event { width: 100%; padding-bottom: 15px;}
- .evt_page_body {position: relative; z-index: 2; width: 100%;}
- .evt_page_bg {width: 100%;}
- .evt_page_bg .bg{width: 100%; height: 600px; background-position: center top; background-repeat: no-repeat;background-size:100% 600px; }
- .evt_header .canvas{position: absolute;left: 0;top: 0;z-index: 1;}
- /* 通用头部 */
- .no_dis{display: none;}
- </style>
- </head>
- <body>
- <a name="web_top"></a>
- <div class="page_event">
- <a id="web_top"></a>
- <img class="no_dis" src="http://cdn.duitang.com/uploads/item/201206/02/20120602133604_RGymY.jpeg" alt="" />
- <div class="evt_page_body">
- <div id="evtHeader" class="evt_floor evt_header">
- <div class="evt_page_bg">
- <div class="bg" style="background-image: url(http://cdn.duitang.com/uploads/item/201206/02/20120602133604_RGymY.jpeg)"></div>
- </div>
- <canvas height="600" width="1200" id="canvas" class="canvas"></canvas>
- </div>
- </div>
- </div>
- <script>
- // 宇宙特效
- "use strict";
- var canvas = document.getElementById('canvas'),
- ctx = canvas.getContext('2d'),
- w = canvas.width = window.innerWidth - 25,
- h = canvas.height = 600,
- hue = 217,
- stars = [],
- count = 0,
- maxStars = 100; // 星星数量
- var setTimeo;
- ctx && (function() {
- var canvas2 = document.createElement('canvas'),
- ctx2 = canvas2.getContext('2d');
- canvas2.width = 300;
- canvas2.height = 300;
- var half = canvas2.width / 2,
- gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
- gradient2.addColorStop(0.16, '#36567D');
- gradient2.addColorStop(0.16, '#fff');
- // gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
- gradient2.addColorStop(0.4, 'transparent');
- ctx2.fillStyle = gradient2;
- ctx2.beginPath();
- ctx2.arc(half, half, half, 0, Math.PI * 2);
- ctx2.fill();
- // End cache
- function random(min, max) {
- if (arguments.length <2) {
- max = min;
- min = 0;
- }
- if (min> max) {
- var hold = max;
- max = min;
- min = hold;
- }
- return Math.floor(Math.random() * (max - min + 1)) + min;
- }
- function maxOrbit(x, y) {
- var max = Math.max(x, y),
- diameter = Math.round(Math.sqrt(max * max + max * max));
- return diameter / 2;
- // 星星移动范围, 值越大范围越小,
- }
- var Star = function() {
- this.orbitRadius = random(maxOrbit(w, h));
- this.radius = random(60, this.orbitRadius) / 20;
- // 星星大小
- this.orbitX = w / 2;
- this.orbitY = h / 2;
- this.timePassed = random(0, maxStars);
- this.speed = random(this.orbitRadius) / 100000;
- // 星星移动速度
- this.alpha = random(2, 10) / 10;
- count++;
- stars[count] = this;
- }
- Star.prototype.draw = function() {
- var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
- y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
- twinkle = random(10);
- if (twinkle === 1 && this.alpha> 0) {
- this.alpha -= 0.05;
- } else if (twinkle === 2 && this.alpha <1) {
- this.alpha += 0.05;
- }
- ctx.globalAlpha = this.alpha;
- ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
- this.timePassed += this.speed;
- }
- for (var i = 0; i < maxStars; i++) {
- new Star();
- }
- animation();
- })();
- function animation() {
- /*ctx.globalCompositeOperation = 'source-over';
- ctx.globalAlpha = 0.1; // 尾巴
- ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)'; // 背景
- ctx.fillRect(0, 0, w, h)*/
- ctx.clearRect(0, 0, w, h);
- ctx.globalCompositeOperation = 'lighter';
- for (var i = 1, l = stars.length; i < l; i++) {
- stars[i].draw();
- };
- // window.requestAnimationFrame(animation);
- setTimeo = setTimeout(animation, 100);
- }
- function removeE() {
- clearTimeout(setTimeo)
- };
- function addE() {
- animation();
- };
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/26090/80a99b1f8d0bd4ff3e4dd9a5f11e7603.html