网站建设谢辞,优惠券网站怎么搭建,青岛网站制作系统,上海网页设计学校目录 一、黑客帝国代码雨
二、发光的文字#xff08;可编辑#xff09;
三、粒子风暴
四、炫酷鼠标移动特效
五、旋转的星空
六、旋转的立方体 一、黑客帝国代码雨
新建一个文本文档#xff0c;打开
上代码#xff1a; !DOCTYPE html
html
head…目录 一、黑客帝国代码雨
二、发光的文字可编辑
三、粒子风暴
四、炫酷鼠标移动特效
五、旋转的星空
六、旋转的立方体 一、黑客帝国代码雨
新建一个文本文档打开
上代码 !DOCTYPE html
html
headtitle黑客帝国代码雨/title
/head
body canvas idcanvas/canvasstyle typetext/cssbody {margin: 0;padding: 0;overflow: hidden;}/stylescript typetext/javascriptvar canvas document.getElementById(canvas);var ctx canvas.getContext(2d);canvas.height window.innerHeight;canvas.width window.innerWidth;var texts 156dsfcac.split();var fontSize 16;var columns canvas.width / fontSize;// 用于计算输出文字时坐标所以长度即为列数var drops [];//初始值for (var x 0; x columns; x) {drops[x] 1;}function draw() {//让背景逐渐由透明到不透明ctx.fillStyle rgba(0, 0, 0, 0.05);ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色ctx.fillStyle #0F0;ctx.font fontSize px arial;//逐行输出文字for (var i 0; i drops.length; i) {var text texts[Math.floor(Math.random() * texts.length)];ctx.fillText(text, i * fontSize, drops[i] * fontSize);if (drops[i] * fontSize canvas.height || Math.random() 0.95) {drops[i] 0;}drops[i];}}setInterval(draw, 33);/script
/body
/html后缀改成.html
我以前的作品也有这个教程链接教你成为机房最靓的仔-CSDN博客
运行效果 二、发光的文字可编辑
新建文本文档打开
上代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle*{/* 初始化 */margin: 0;padding: 0;}body{/* 100% 窗口高度 */min-height: 100vh;width: 100%;/* 弹性布局 水平垂直居中 */display: flex;justify-content: center;align-items: center;background-color: #06252e;}.box{width: 100%;/* 投影效果 */-webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));}h1{color: #fff;font-size: 96px;/* 字间距 */letter-spacing: 15px;/* 转大写 */text-transform: uppercase;text-align: center;line-height: 76px;outline: none;/* 自定义属性 --c,可通过 var 函数对其调用 */--c:lightseagreen;/* 调用自定义属性--c设置文字阴影发光效果 */text-shadow: 0 0 10px var(--c),0 0 20px var(--c),0 0 40px var(--c),0 0 80px var(--c),0 0 160px var(--c);/* 执行动画动画名 时长 线性的 无限次播放 */animation: animate 5s linear infinite;}/* 定义动画 */keyframes animate{to{/* 色相旋转过滤镜设置度数可改变颜色 */filter: hue-rotate(360deg);}}/style
/head
bodydiv classboxh1 contenteditabletruehello/h1/div
/body
/html后缀改成.html
运行效果 三、粒子风暴
新建文本文档打开
输入代码
!doctype html
html
head
meta charsetutf-8
title粒子效果/titlestyle
html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;
}#canvas{position:absolute;width:100%;height:100%;
}
/style/head
bodycanvas idcanvas/canvasscript
function project3D(x,y,z,vars){var p,d;x-vars.camX;y-vars.camY-8;z-vars.camZ;pMath.atan2(x,z);dMath.sqrt(x*xz*z);xMath.sin(p-vars.yaw)*d;zMath.cos(p-vars.yaw)*d;pMath.atan2(y,z);dMath.sqrt(y*yz*z);yMath.sin(p-vars.pitch)*d;zMath.cos(p-vars.pitch)*d;var rx1-1000;var ry11;var rx21000;var ry21;var rx30;var ry30;var rx4x;var ry4z;var uc(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);var ua((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z0.000000001;if(ua0ua1ub0ub1){return {x:vars.cx(rx1ua*(rx2-rx1))*vars.scale,y:vars.cyy/z*vars.scale,d:(x*xy*yz*z)};}else{return { d:-1 };}
}function elevation(x,y,z){var dist Math.sqrt(x*xy*yz*z);if(dist z/dist-1 z/dist 1) return Math.acos(z / dist);return 0.00000001;
}function rgb(col){col 0.000001;var r parseInt((0.5Math.sin(col)*0.5)*16);var g parseInt((0.5Math.cos(col)*0.5)*16);var b parseInt((0.5-Math.sin(col)*0.5)*16);return #r.toString(16)g.toString(16)b.toString(16);
}function interpolateColors(RGB1,RGB2,degree){var w2degree;var w11-w2;return [w1*RGB1[0]w2*RGB2[0],w1*RGB1[1]w2*RGB2[1],w1*RGB1[2]w2*RGB2[2]];
}function rgbArray(col){col 0.000001;var r parseInt((0.5Math.sin(col)*0.5)*256);var g parseInt((0.5Math.cos(col)*0.5)*256);var b parseInt((0.5-Math.sin(col)*0.5)*256);return [r, g, b];
}function colorString(arr){var r parseInt(arr[0]);var g parseInt(arr[1]);var b parseInt(arr[2]);return #(0 r.toString(16) ).slice (-2)(0 g.toString(16) ).slice (-2)(0 b.toString(16) ).slice (-2);
}function process(vars){if(vars.points.lengthvars.initParticles) for(var i0;i5;i) spawnParticle(vars);var p,d,t;p Math.atan2(vars.camX, vars.camZ);d Math.sqrt(vars.camX * vars.camX vars.camZ * vars.camZ);d - Math.sin(vars.frameNo / 80) / 25;t Math.cos(vars.frameNo / 300) / 165;vars.camX Math.sin(p t) * d;vars.camZ Math.cos(p t) * d;vars.camY -Math.sin(vars.frameNo / 220) * 15;vars.yaw Math.PI p t;vars.pitch elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;var t;for(var i0;ivars.points.length;i){xvars.points[i].x;yvars.points[i].y;zvars.points[i].z;dMath.sqrt(x*xz*z)/1.0075;t.1/(1d*d/5);pMath.atan2(x,z)t;vars.points[i].xMath.sin(p)*d;vars.points[i].zMath.cos(p)*d;vars.points[i].yvars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);if(vars.points[i].yvars.vortexHeight/2 || d.25){vars.points.splice(i,1);spawnParticle(vars);}}
}function drawFloor(vars){var x,y,z,d,point,a;for (var i -25; i 25; i 1) {for (var j -25; j 25; j 1) {x i*2;z j*2;y vars.floor;d Math.sqrt(x * x z * z);point project3D(x, y-d*d/85, z, vars);if (point.d ! -1) {size 1 15000 / (1 point.d);a 0.15 - Math.pow(d / 50, 4) * 0.15;if (a 0) {vars.ctx.fillStyle colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5Math.sin(d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}} vars.ctx.fillStyle #82f;for (var i -25; i 25; i 1) {for (var j -25; j 25; j 1) {x i*2;z j*2;y -vars.floor;d Math.sqrt(x * x z * z);point project3D(x, yd*d/85, z, vars);if (point.d ! -1) {size 1 15000 / (1 point.d);a 0.15 - Math.pow(d / 50, 4) * 0.15;if (a 0) {vars.ctx.fillStyle colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5Math.sin(-d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}
}function sortFunction(a,b){return b.dist-a.dist;
}function draw(vars){vars.ctx.globalAlpha.15;vars.ctx.fillStyle#000;vars.ctx.fillRect(0, 0, canvas.width, canvas.height);drawFloor(vars);var point,x,y,z,a;for(var i0;ivars.points.length;i){xvars.points[i].x;yvars.points[i].y;zvars.points[i].z;pointproject3D(x,y,z,vars);if(point.d ! -1){vars.points[i].distpoint.d;size1vars.points[i].radius/(1point.d);dMath.abs(vars.points[i].y);a .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;vars.ctx.globalAlphaa0a1?a:0;vars.ctx.fillStylergb(vars.points[i].color);if(point.x-1point.xvars.canvas.widthpoint.y-1point.yvars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}vars.points.sort(sortFunction);
}function spawnParticle(vars){var p,ls;pt{};pMath.PI*2*Math.random();lsMath.sqrt(Math.random()*vars.distributionRadius);pt.xMath.sin(p)*ls;pt.y-vars.vortexHeight/2;pt.vyvars.initV/20Math.random()*vars.initV;pt.zMath.cos(p)*ls;pt.radius200800*Math.random();pt.colorpt.radius/1000vars.frameNo/250;vars.points.push(pt);
}function frame(vars) {if(vars undefined){var vars{};vars.canvas document.querySelector(canvas);vars.ctx vars.canvas.getContext(2d);vars.canvas.width document.body.clientWidth;vars.canvas.height document.body.clientHeight;window.addEventListener(resize, function(){vars.canvas.width document.body.clientWidth;vars.canvas.height document.body.clientHeight;vars.cxvars.canvas.width/2;vars.cyvars.canvas.height/2;}, true);vars.frameNo0;vars.camX 0;vars.camY 0;vars.camZ -14;vars.pitch elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;vars.yaw 0;vars.cxvars.canvas.width/2;vars.cyvars.canvas.height/2;vars.bounding10;vars.scale500;vars.floor26.5;vars.points[];vars.initParticles700;vars.initV.01;vars.distributionRadius800;vars.vortexHeight25;}vars.frameNo;requestAnimationFrame(function() {frame(vars);});process(vars);draw(vars);
}
frame();
/scriptdiv styletext-align:center;margin:50px 0; font:normal 14px/24px MicroSoft YaHei;
pa hrefhttp://sc.chinaz.com/ target_blank/a/p
/div
/body
/html后缀改成.html 运行效果 四、炫酷鼠标移动特效 新建文本文档打开
输入代码
!DOCTYPE html
html xmlnshttp://www.w3.org/1999/xhtml langen
head
titlestar/title
script typetext/javascript
window.onload function () {
C Math.cos; // cache Math objects
S Math.sin;
U 0;
w window;
j document;
d j.getElementById(c);
c d.getContext(2d);
W d.width w.innerWidth;
H d.height w.innerHeight;
c.fillRect(0, 0, W, H); // resize canvas and draw black rect (default)
c.globalCompositeOperation lighter; // switch to additive color application
c.lineWidth 0.2;
c.lineCap round;
var bool 0,
t 0; // theta
d.onmousemove function (e) {
if(window.T) {
if(D9) { DMath.random()*15; f(1); }
clearTimeout(T);
}
X e.pageX; // grab mouse pixel coords
Y e.pageY;
a0; // previous coord.x
b0; // previous coord.y
A X, // original coord.x
B Y; // original coord.y
R(e.pageX/W * 9990)/999;
r(e.pageY/H * 9990)/999;
Ue.pageX/H * 360 0;
D9;
g 360 * Math.PI / 180;
T setInterval(f function (e) { // start looping spectrum
c.save();
c.globalCompositeOperation source-over; // switch to additive color application
if(e!1) {
c.fillStyle rgba(0,0,0,0.02);
c.fillRect(0, 0, W, H); // resize canvas and draw black rect (default)
}
c.restore();
i 25; while(i --) {
c.beginPath();
if(D 450 || bool) { // decrease diameter
if(!bool) { // has hit maximum
bool 1;
}
if(D 0.1) { // has hit minimum
bool 0;
}
t - g; // decrease theta
D - 0.1; // decrease size
}
if(!bool) {
t g; // increase theta
D 0.1; // increase size
}
q (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x (R - r) * C(t) D * C(q) (A (X - A) * (i / 25)) (r - R); // center on xy coords
y (R - r) * S(t) - D * S(q) (B (Y - B) * (i / 25));
if (a) { // draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle hsla( (U % 360) ,100%,50%,0.75); // draw rainbow hypotrochoid
c.stroke();
a x; // set previous coord.x
b y; // set previous coord.y
}
U - 0.5; // increment hue
A X; // set original coord.x
B Y; // set original coord.y
}, 16);
}
j.onkeydown function(e) { ab0; R 0.05 }
d.onmousemove({pageX:300, pageY:290})
}/script
/headbody stylemargin:0px;padding:0px;width:100%;height:100%;overflow:hidden;
canvas idc/canvas
/body
/html后缀改成.html 运行效果 五、旋转的星空
新建文本文档打开
上代码
!doctype html
html
head
meta charsetutf-8
title旋转的星空/title
style typetext/css
body{background: black;padding: 0;margin: 0; overflow:hidden}
.header{margin: 0 auto;width: 100%;height: 100%;background-color: #000;position: relative;}
/style
/head
body
div classheadercanvas idcanvas/canvas/div
script
var canvas document.getElementById(canvas),
ctx canvas.getContext(2d),
w canvas.width window.innerWidth,
h canvas.height window.innerHeight,
hue 217,
stars [],
count 0,
maxStars 3000;//星星数量
var canvas2 document.createElement(canvas),
ctx2 canvas2.getContext(2d);
canvas2.width 100;
canvas2.height 100;
var half canvas2.width / 2,
gradient2 ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, #CCC);
gradient2.addColorStop(0.1, hsl( hue , 61%, 33%));
gradient2.addColorStop(0.25, hsl( hue , 64%, 6%));
gradient2.addColorStop(1, 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) / 8;
//星星大小
this.orbitX w / 2;
this.orbitY h / 2;
this.timePassed random(0, maxStars);
this.speed random(this.orbitRadius) / 50000;
//星星移动速度
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();
}
function animation() {
ctx.globalCompositeOperation source-over;
ctx.globalAlpha 0.5; //尾巴
ctx.fillStyle hsla( hue , 64%, 6%, 2);
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation lighter;
for (var i 1, l stars.length; i l; i) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
/script
/body
/html后缀改成.html 运行效果 六、旋转的立方体
新建文本文档打开
直接上代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title旋转立方体/titlestyle#cube {width: 200px;height: 200px;position: relative;transform-style: preserve-3d;animation: rotate 6s infinite linear;margin: 100px auto;}#cube div {position: absolute;width: 200px;height: 200px;background-color: rgba(0, 255, 255, 0.5);border: 2px solid #333;}#cube .front {transform: translateZ(100px);}#cube .back {transform: rotateY(180deg) translateZ(100px);}#cube .right {transform: rotateY(90deg) translateZ(100px);}#cube .left {transform: rotateY(-90deg) translateZ(100px);}#cube .top {transform: rotateX(90deg) translateZ(100px);}#cube .bottom {transform: rotateX(-90deg) translateZ(100px);}keyframes rotate {0% {transform: rotateX(0) rotateY(0) rotateZ(0);}100% {transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}/style/headbodydiv idcubediv classfront/divdiv classback/divdiv classright/divdiv classleft/divdiv classtop/divdiv classbottom/div/divscriptconst cube document.querySelector(#cube);let isPaused false;cube.addEventListener(mouseover, () {isPaused true;cube.style.animationPlayState paused;});cube.addEventListener(mouseout, () {isPaused false;cube.style.animationPlayState running;});setInterval(() {if (!isPaused) {cube.style.animationPlayState running;}}, 1000);/script/body
/html后缀改成.html
运行效果 先做到这了以后再有我会接着做886 附HTML小指南转载Carefree1990大神的作品
原链接https://blog.csdn.net/weixin_42400955/article/details/81106697
资源下载放在文章顶部了
