自助机 html模板,index.html

自助机

body{

-webkit-filter: contrast(120%);

filter: contrast(120%);

}

.container {

width: 100%;

height: 100%;

background-image: radial-gradient(1600px at 70% 120%, #1295FF 10%, #005DE5 100%);

position: relative;

}

.container .content {

width: inherit;

height: inherit;

position: absolute;

}

#universe {

/* width: 100% !important;

height: 100% !important; */

}

window.onload = function() {

var version = navigator.userAgent.match(/MSIE (\d+)/)

version = version && version[1]

version && version <= 10 ? window.location.href = "/static/help/help.html" : ''

}

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||

window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

var starDensity = .216;

var speedCoeff = .05;

var width;

var height;

var starCount;

var circleRadius;

var circleCenter;

var first = true;

var giantColor = '180,184,240';

var starColor = '226,225,142';

var cometColor = '226,225,224';

var canva = document.getElementById('universe');

var stars = [];

windowResizeHandler();

window.addEventListener('resize', windowResizeHandler, false);

createUniverse();

function createUniverse() {

universe = canva.getContext('2d');

for (var i = 0; i < starCount; i++) {

stars[i] = new Star();

stars[i].reset();

}

draw();

}

function draw() {

universe.clearRect(0, 0, width, height);

var starsLength = stars.length;

for (var i = 0; i < starsLength; i++) {

var star = stars[i];

star.move();

star.fadeIn();

star.fadeOut();

star.draw();

}

window.requestAnimationFrame(draw);

}

function Star() {

this.reset = function () {

this.giant = getProbability(3);

this.comet = this.giant || first ? false : getProbability(10);

this.x = getRandInterval(0, width - 10);

this.y = getRandInterval(0, height);

this.r = getRandInterval(1.1, 2.6);

this.dx = getRandInterval(speedCoeff, 6 * speedCoeff) + (this.comet + 1 - 1) * speedCoeff *

getRandInterval(50, 120) + speedCoeff * 2;

this.dy = -getRandInterval(speedCoeff, 6 * speedCoeff) - (this.comet + 1 - 1) * speedCoeff *

getRandInterval(50, 120);

this.fadingOut = null;

this.fadingIn = true;

this.opacity = 0;

this.opacityTresh = getRandInterval(.2, 1 - (this.comet + 1 - 1) * .4);

this.do = getRandInterval(0.0005, 0.002) + (this.comet + 1 - 1) * .001;

};

this.fadeIn = function () {

if (this.fadingIn) {

this.fadingIn = this.opacity > this.opacityTresh ? false : true;

this.opacity += this.do;

}

};

this.fadeOut = function () {

if (this.fadingOut) {

this.fadingOut = this.opacity < 0 ? false : true;

this.opacity -= this.do / 2;

if (this.x > width || this.y < 0) {

this.fadingOut = false;

this.reset();

}

}

};

this.draw = function () {

universe.beginPath();

if (this.giant) {

universe.fillStyle = 'rgba(' + giantColor + ',' + this.opacity + ')';

universe.arc(this.x, this.y, 2, 0, 2 * Math.PI, false);

} else if (this.comet) {

universe.fillStyle = 'rgba(' + cometColor + ',' + this.opacity + ')';

universe.arc(this.x, this.y, 1.5, 0, 2 * Math.PI, false);

//comet tail

for (var i = 0; i < 30; i++) {

universe.fillStyle = 'rgba(' + cometColor + ',' + (this.opacity - (this.opacity / 20) * i) +

')';

universe.rect(this.x - this.dx / 4 * i, this.y - this.dy / 4 * i - 2, 2, 2);

universe.fill();

}

} else {

universe.fillStyle = 'rgba(' + starColor + ',' + this.opacity + ')';

universe.rect(this.x, this.y, this.r, this.r);

}

universe.closePath();

universe.fill();

};

this.move = function () {

this.x += this.dx;

this.y += this.dy;

if (this.fadingOut === false) {

this.reset();

}

if (this.x > width - (width / 4) || this.y < 0) {

this.fadingOut = true;

}

};

(function () {

setTimeout(function () {

first = false;

}, 50)

})()

}

function getProbability(percents) {

return ((Math.floor(Math.random() * 1000) + 1) < percents * 10);

}

function getRandInterval(min, max) {

return (Math.random() * (max - min) + min);

}

function windowResizeHandler() {

width = window.innerWidth;

height = window.innerHeight;

starCount = width * starDensity;

circleRadius = (width > height ? height / 2 : width / 2);

circleCenter = {

x: width / 2,

y: height / 2

}

canva.setAttribute('width', width);

canva.setAttribute('height', height - 10);

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史