全屏下彩色数字雨源码,拿去二开改造用处多多

    选择打赏方式

从友链[技术博客]那里扒下来的   嘘。。

代码:

<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zcjun.com</title>
<style>
* {
	margin: 0;
	padding: 0;
}
body {
	overflow: hidden;
}
</style>
<style type="text/css">
	var canvas=document.getElementById("canvas");var can=canvas.getContext("2d");var s=window.screen;var w=canvas.width=s.width;var h=canvas.height=s.height;can.fillStyle=color2();var words=Array(256).join("1").split("");setInterval(draw,50);function draw(){can.fillStyle='rgba(0,0,0,0.05)';can.fillRect(0,0,w,h);can.fillStyle=color2();words.map(function(y,n){text='0';if (Math.random()>0.5) {text=1;} x=n*10;can.fillText(text,x,y)
words[n]=(y>758+Math.random()*484?0:y+10);});}
function color1(){var colors=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];var color="";for(var i=0;i<6;i++){var n=Math.ceil(Math.random()*15);color+=""+colors[n];}
return '#'+color;}
function color2(){var color=Math.ceil(Math.random()*16777215).toString(16);while(color.length<6){color='0'+color;}
return '#'+color;}
function color3(){return "#"+(function(color){return new Array(7-color.length).join("0")+color;})((Math.random()*0x1000000<<0).toString(16))}
</style>
<style type="text/css">
	html,body{width:100%;height:100%;overflow:hidden;font-family:rubik mono one,sans-serif;background:#22292c}svg{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}#d{position:absolute;text-align:center;top:20%;left:50%;transform:translateX(-50%);width:500px}button{z-index:2;height:26px;width:100px;box-shadow:0 0 0 1px #2868c8;color:#fff;font-size:15px;letter-spacing:1px;background:#3385ff;border-bottom:1px solid #2d78f4;outline:medium;border:1px solid #2868c8}.input{z-index:2;font-size:20px;font-family:helvetica,sans-serif;background:0 0;border:1px solid #ddd;color:#eee}.text,.offscreen-text{width:100%;top:50%;transform:translateY(-50%);display:block;position:absolute;margin:0}.offscreen-text{text-align:center;top:-9999px}.text span{position:absolute}
</style>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" width="1920" height="1080"> 您的浏览器不支持canvas标签,请您更换浏览器 </canvas>
<script type="text/javascript">
	var canvas=document.getElementById("canvas");var can=canvas.getContext("2d");var s=window.screen;var w=canvas.width=s.width;var h=canvas.height=s.height;can.fillStyle=color2();var words=Array(256).join("1").split("");setInterval(draw,50);function draw(){can.fillStyle='rgba(0,0,0,0.05)';can.fillRect(0,0,w,h);can.fillStyle=color2();words.map(function(y,n){text='0';if (Math.random()>0.5) {text=1;} x=n*10;can.fillText(text,x,y)
words[n]=(y>758+Math.random()*484?0:y+10);});}
function color1(){var colors=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];var color="";for(var i=0;i<6;i++){var n=Math.ceil(Math.random()*15);color+=""+colors[n];}
return '#'+color;}
function color2(){var color=Math.ceil(Math.random()*16777215).toString(16);while(color.length<6){color='0'+color;}
return '#'+color;}
function color3(){return "#"+(function(color){return new Array(7-color.length).join("0")+color;})((Math.random()*0x1000000<<0).toString(16))}
</script>
<script type="text/javascript">
	var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}return function(Constructor,protoProps,staticProps){if(protoProps)defineProperties(Constructor.prototype,protoProps);if(staticProps)defineProperties(Constructor,staticProps);return Constructor;};}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}
var selectSVG=function selectSVG(id){var el=document.getElementById(id);return new SVGElement(el);};var createSVG=function createSVG(type){var el=document.createElementNS('http://www.w3.org/2000/svg',type);return new SVGElement(el);};var SVGElement=function(){function SVGElement(element){_classCallCheck(this,SVGElement);this.element=element;}
_createClass(SVGElement,[{key:'set',value:function set(attributeName,value){}},{key:'style',value:function style(property,value){this.element.style[property]=value;}}]);return SVGElement;}();var colors=[{main:'#FBDB4A',shades:['#FAE073','#FCE790','#FADD65','#E4C650']},{main:'#F3934A',shades:['#F7B989','#F9CDAA','#DD8644','#F39C59']},{main:'#EB547D',shades:['#EE7293','#F191AB','#D64D72','#C04567']},{main:'#9F6AA7',shades:['#B084B6','#C19FC7','#916198','#82588A']},{main:'#5476B3',shades:['#6382B9','#829BC7','#4D6CA3','#3E5782']},{main:'#2BB19B',shades:['#4DBFAD','#73CDBF','#27A18D','#1F8171']},{main:'#70B984',shades:['#7FBE90','#98CBA6','#68A87A','#5E976E']}];var svg=selectSVG('svg');var text=document.getElementById('text');var offscreenText=document.getElementById('offscreen-text');var input=document.getElementById('input');var button=document.getElementById('button');var width=window.innerWidth;var height=window.innerHeight;var textSize=0;var textCenter=0;var letters=[];var prompt=['s','t','a','r','t',' ','t','y','p','i','n','g'];var runPrompt=false;var resizePage=function resizePage(){width=window.innerWidth;height=window.innerHeight;svg.set('height',height);svg.set('width',width);svg.set('viewBox','0 0 '+width+' '+height);resizeLetters();};var resizeLetters=function resizeLetters(){textSize=width/(letters.length+2);if(textSize>100)textSize=100;text.style.fontSize=textSize+'px';text.style.height=textSize+'px';text.style.lineHeight=textSize+'px';offscreenText.style.fontSize=textSize+'px';var textRect=text.getBoundingClientRect();textCenter=textRect.top+textRect.height/2;positionLetters();};var positionLetters=function positionLetters(){letters.forEach(function(letter){var timing=letter.shift?0.1:0;TweenLite.to(letter.onScreen,timing,{x:letter.offScreen.offsetLeft+'px',ease:Power3.easeInOut});letter.shift=true;});};var animateLetterIn=function animateLetterIn(letter){var yOffset=(0.5+Math.random()*0.5)*textSize;TweenLite.fromTo(letter,0.4,{scale:0},{scale:1,ease:Back.easeOut});TweenLite.fromTo(letter,0.4,{opacity:0},{opacity:1,ease:Power3.easeOut});TweenLite.to(letter,0.2,{y:-yOffset,ease:Power3.easeInOut});TweenLite.to(letter,0.2,{y:0,ease:Power3.easeInOut,delay:0.2});var rotation=-50+Math.random()*100;TweenLite.to(letter,0.2,{rotation:rotation,ease:Power3.easeInOut});TweenLite.to(letter,0.2,{rotation:0,ease:Power3.easeInOut,delay:0.2});};var addDecor=function addDecor(letter,color){setTimeout(function(){var rect=letter.getBoundingClientRect();var x0=letter.offsetLeft+letter.offsetWidth/2;var y0=textCenter-textSize*0.5;var shade=color.shades[Math.floor(Math.random()*4)];for(var i=0;i<8;i++){addTri(x0,y0,shade);}for(var i=0;i<8;i++){addCirc(x0,y0);}},150);};var addTri=function addTri(x0,y0,shade){var tri=createSVG('polygon');var a=Math.random();var a2=a+(-0.2+Math.random()*0.4);var r=textSize*0.52;var r2=r+textSize*Math.random()*0.2;var x=x0+r*Math.cos(2*Math.PI*a);var y=y0+r*Math.sin(2*Math.PI*a);var x2=x0+r2*Math.cos(2*Math.PI*a2);var y2=y0+r2*Math.sin(2*Math.PI*a2);var triSize=textSize*0.1;var scale=0.3+Math.random()*0.7;var offset=triSize*scale;tri.set('points','0,0 '+triSize*2+',0 '+triSize+','+triSize*2);tri.style('fill',shade);svg.element.appendChild(tri.element);TweenLite.fromTo(tri.element,0.6,{rotation:Math.random()*360,scale:scale,x:x-offset,y:y-offset,opacity:1},{x:x2-offset,y:y2-offset,opacity:0,ease:Power1.easeInOut,onComplete:function onComplete(){svg.element.removeChild(tri.element);}});};var addCirc=function addCirc(x0,y0){var circ=createSVG('circle');var a=Math.random();var r=textSize*0.52;var r2=r+textSize;var x=x0+r*Math.cos(2*Math.PI*a);var y=y0+r*Math.sin(2*Math.PI*a);var x2=x0+r2*Math.cos(2*Math.PI*a);var y2=y0+r2*Math.sin(2*Math.PI*a);var circSize=textSize*0.05*Math.random();circ.set('r',circSize);circ.style('fill','#eee');svg.element.appendChild(circ.element);TweenLite.fromTo(circ.element,0.6,{x:x-circSize,y:y-circSize,opacity:1},{x:x2-circSize,y:y2-circSize,opacity:0,ease:Power1.easeInOut,onComplete:function onComplete(){svg.element.removeChild(circ.element);}});};var addLetter=function addLetter(char,i){var letter=document.createElement('span');var oLetter=document.createElement('span');letter.innerHTML=char;oLetter.innerHTML=char;text.appendChild(letter);var color=colors[i%colors.length];letter.style.color=color.main;offscreenText.appendChild(oLetter);letters[i]={offScreen:oLetter,onScreen:letter,char:char};animateLetterIn(letter);addDecor(oLetter,color);};var addLetters=function addLetters(value){value.forEach(function(char,i){if(letters[i]&&letters[i].char!==char){letters[i].onScreen.innerHTML=char;letters[i].offScreen.innerHTML=char;letters[i].char=char;}
if(letters[i]===undefined){addLetter(char,i);}});};var animateLetterOut=function animateLetterOut(letter,i){TweenLite.to(letter.onScreen,0.1,{scale:0,opacity:0,ease:Power2.easeIn,onComplete:function onComplete(){console.log('removing');console.log(letter);offscreenText.removeChild(letter.offScreen);text.removeChild(letter.onScreen);positionLetters();}});letters.splice(i,1);};var removeLetters=function removeLetters(value){for(var i=letters.length-1;i>=0;i--){var letter=letters[i];if(value[i]===undefined){animateLetterOut(letter,i);}}};var onInputChange=function onInputChange(){var value=input.value===''?[]:input.value.toLowerCase().split('');addLetters(value);removeLetters(value);resizeLetters();};var keyup=function keyup(e){if(runPrompt){input.value='';runPrompt=false;};onInputChange();};var addPrompt=function addPrompt(i){setTimeout(function(){if(runPrompt&&prompt[i]){input.value=input.value+prompt[i];onInputChange();addPrompt(i+1);}},300);};resizePage();window.addEventListener('resize',resizePage);input.addEventListener('keyup',keyup);input.focus();addPrompt(0);
</script>
</body></html>

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:全屏下彩色数字雨源码,拿去二开改造用处多多 https://www.zcjun.com/yuanma/280.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!