Html炫酷代码例程

已于 2024-09-29 09:32:36 修改
阅读量1.8w 收藏 214
点赞数 47
分类专栏： # Python示例 文章标签： html javascript css
于 2022-05-25 14:03:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_26043945/article/details/124964794
版权

目录

1、代码雨

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>流星雨</title>
		<meta name="keywords" content="关键词，关键字">
		<meta name="description" content="描述信息">
		<style>
			body {
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
 
	<body>
 
		<!--
			<canvas>画布 画板 画画的本子
		-->
		<canvas width=400 height=400 style="background:#000000;" id="canvas"></canvas>
 
		<!--
			javascript
			画笔
		--> 
		<script>
					
			//获取画板
			//doccument 当前文档
			//getElement 获取一个标签
			//ById 通过Id名称的方式
			//var 声明一片空间
			//var canvas 声明一片空间的名字叫做canvas
			var canvas = document.getElementById("canvas");
			//获取画板权限 上下文
			var ctx = canvas.getContext("2d");
			//让画板的大小等于屏幕的大小
			/*
				思路：
					1.获取屏幕对象
					2.获取屏幕的尺寸
					3.屏幕的尺寸赋值给画板
			*/
			//获取屏幕对象
			var s = window.screen;
			//获取屏幕的宽度和高度
			var w = s.width;
			var h = s.height;
			//设置画板的大小
			canvas.width = w;
			canvas.height = h;
 
			//设置文字大小 
			var fontSize = 14;
			//计算一行有多少个文字 取整数 向下取整
			var clos = Math.floor(w/fontSize);
			//思考每一个字的坐标
			//创建数组把clos 个 0 （y坐标存储起来）
			var drops = [];
			var str = "qwertyuiopasdfghjklzxcvbnm";
			//往数组里面添加 clos 个 0
			for(var i = 0;i<clos;i++) {
				drops.push(0);
			}
 
			//绘制文字
			function drawString() {
				//给矩形设置填充色
				ctx.fillStyle="rgba(0,0,0,0.05)"
				//绘制一个矩形
				ctx.fillRect(0,0,w,h);
 
				//添加文字样式
				ctx.font = "600 "+fontSize+"px 微软雅黑";
				//设置文字颜色
				ctx.fillStyle = "#00ff00";
 
				for(var i = 0;i<clos;i++) {
					//x坐标
					var x = i*fontSize;
					//y坐标
					var y = drops[i]*fontSize;
					//设置绘制文字
					ctx.fillText(str[Math.floor(Math.random()*str.length)],x,y);
					if(y>h&&Math.random()>0.99){
						drops[i] = 0;
					}
					drops[i]++;
				}
					
			}
			//定义一个定时器，每隔30毫秒执行一次
			setInterval(drawString,30);
		</script>
	</body>
</html>

2、3D烟花

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
html,body{
  margin:0px;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
}

#canvas{
  width:100%;
  height:100%;
}

  </style>
 
 </head>
<canvas id="canvas"></canvas>
   <script>
 function initVars(){

  pi=Math.PI;
  ctx=canvas.getContext("2d");
  canvas.width=canvas.clientWidth;
  canvas.height=canvas.clientHeight;
  cx=canvas.width/2;
  cy=canvas.height/2;
  playerZ=-25;
  playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
  scale=600;
  seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
  seeds=new Array();
  sparkPics=new Array();
  s="https://cantelope.org/NYE/";
  for(i=1;i<=10;++i){
    sparkPic=new Image();
    sparkPic.src=s+"spark"+i+".png";
    sparkPics.push(sparkPic);
  }
  sparks=new Array();
  pow1=new Audio(s+"pow1.ogg");
  pow2=new Audio(s+"pow2.ogg");
  pow3=new Audio(s+"pow3.ogg");
  pow4=new Audio(s+"pow4.ogg");
  frames = 0;
}

function rasterizePoint(x,y,z){

  var p,d;
  x-=playerX;
  y-=playerY;
  z-=playerZ;
  p=Math.atan2(x,z);
  d=Math.sqrt(x*x+z*z);
  x=Math.sin(p-yaw)*d;
  z=Math.cos(p-yaw)*d;
  p=Math.atan2(y,z);
  d=Math.sqrt(y*y+z*z);
  y=Math.sin(p-pitch)*d;
  z=Math.cos(p-pitch)*d;
  var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
  if(!uc) return {x:0,y:0,d:-1};
  var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  if(!z)z=.000000001;
  if(ua>0&&ua<1&&ub>0&&ub<1){
    return {
      x:cx+(rx1+ua*(rx2-rx1))*scale,
      y:cy+y/z*scale,
      d:Math.sqrt(x*x+y*y+z*z)
    };
  }else{
    return {
      x:cx+(rx1+ua*(rx2-rx1))*scale,
      y:cy+y/z*scale,
      d:-1
    };
  }
}

function spawnSeed(){
  
  seed=new Object();
  seed.x=-50+Math.random()*100;
  seed.y=25;
  seed.z=-50+Math.random()*100;
  seed.vx=.1-Math.random()*.2;
  seed.vy=-1.5;//*(1+Math.random()/2);
  seed.vz=.1-Math.random()*.2;
  seed.born=frames;
  seeds.push(seed);
}

function splode(x,y,z){
  
  t=5+parseInt(Math.random()*150);
  sparkV=1+Math.random()*2.5;
  type=parseInt(Math.random()*3);
  switch(type){
    case 0:
      pic1=parseInt(Math.random()*10);
      break;
    case 1:
      pic1=parseInt(Math.random()*10);
      do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
      break;
    case 2:
      pic1=parseInt(Math.random()*10);
      do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
      do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
      break;
  }
  for(m=1;m<t;++m){
    spark=new Object();
    spark.x=x; spark.y=y; spark.z=z;
    p1=pi*2*Math.random();
    p2=pi*Math.random();
    v=sparkV*(1+Math.random()/6)
    spark.vx=Math.sin(p1)*Math.sin(p2)*v;
    spark.vz=Math.cos(p1)*Math.sin(p2)*v;
    spark.vy=Math.cos(p2)*v;
    switch(type){
      case 0: spark.img=sparkPics[pic1]; break;
      case 1:
        spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
        break;
      case 2:
        switch(parseInt(Math.random()*3)){
          case 0: spark.img=sparkPics[pic1]; break;
          case 1: spark.img=sparkPics[pic2]; break;
          case 2: spark.img=sparkPics[pic3]; break;
        }
        break;
    }
    spark.radius=25+Math.random()*50;
    spark.alpha=1;
    spark.trail=new Array();
    sparks.push(spark);
  }
  pow = new Audio(`${s}pow${~~(Math.random()*4)}.ogg`); 
  // switch(parseInt(Math.random()*4)){

  //   case 0: pow=new Audio(s+"pow1.ogg"); break;
  //   case 1: pow=new Audio(s+"pow2.ogg"); break;
  //   case 2: pow=new Audio(s+"pow3.ogg"); break;
  //   case 3: pow=new Audio(s+"pow4.ogg"); break;
  // }
  d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  pow.volume=1.5/(1+d/10);
  pow.play();
}

function doLogic(){
  
  if(seedTimer<frames){
    seedTimer=frames+seedInterval*Math.random()*10;
    spawnSeed();
  }
  for(i=0;i<seeds.length;++i){
    seeds[i].vy+=gravity;
    seeds[i].x+=seeds[i].vx;
    seeds[i].y+=seeds[i].vy;
    seeds[i].z+=seeds[i].vz;
    if(frames-seeds[i].born>seedLife){
      splode(seeds[i].x,seeds[i].y,seeds[i].z);
      seeds.splice(i,1);
    }
  }
  for(i=0;i<sparks.length;++i){
    if(sparks[i].alpha>0 && sparks[i].radius>5){
      sparks[i].alpha-=.01;
      sparks[i].radius/=1.02;
      sparks[i].vy+=gravity;
      point=new Object();
      point.x=sparks[i].x;
      point.y=sparks[i].y;
      point.z=sparks[i].z;
      if(sparks[i].trail.length){
        x=sparks[i].trail[sparks[i].trail.length-1].x;
        y=sparks[i].trail[sparks[i].trail.length-1].y;
        z=sparks[i].trail[sparks[i].trail.length-1].z;
        d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
        if(d>9){
          sparks[i].trail.push(point);
        }
      }else{
        sparks[i].trail.push(point);
      }
      if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);        
      sparks[i].x+=sparks[i].vx;
      sparks[i].y+=sparks[i].vy;
      sparks[i].z+=sparks[i].vz;
      sparks[i].vx/=1.075;
      sparks[i].vy/=1.075;
      sparks[i].vz/=1.075;
    }else{
      sparks.splice(i,1);
    }
  }
  p=Math.atan2(playerX,playerZ);
  d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  d+=Math.sin(frames/80)/1.25;
  t=Math.sin(frames/200)/40;
  playerX=Math.sin(p+t)*d;
  playerZ=Math.cos(p+t)*d;
  yaw=pi+p+t;
}

function rgb(col){
  
  var r = parseInt((.5+Math.sin(col)*.5)*16);
  var g = parseInt((.5+Math.cos(col)*.5)*16);
  var b = parseInt((.5-Math.sin(col)*.5)*16);
  return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}

function draw(){
  
  ctx.clearRect(0,0,cx*2,cy*2);
  
  ctx.fillStyle="#ff8";
  for(i=-100;i<100;i+=3){
    for(j=-100;j<100;j+=4){
      x=i;z=j;y=25;
      point=rasterizePoint(x,y,z);
      if(point.d!=-1){
        size=250/(1+point.d);
        d = Math.sqrt(x * x + z * z);
        a = 0.75 - Math.pow(d / 100, 6) * 0.75;
        if(a>0){
          ctx.globalAlpha = a;
          ctx.fillRect(point.x-size/2,point.y-size/2,size,size);        
        }
      }
    }
  }
  ctx.globalAlpha=1;
  for(i=0;i<seeds.length;++i){
    point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
    if(point.d!=-1){
      size=200/(1+point.d);
      ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
    }
  }
  point1=new Object();
  for(i=0;i<sparks.length;++i){
    point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
    if(point.d!=-1){
      size=sparks[i].radius*200/(1+point.d);
      if(sparks[i].alpha<0)sparks[i].alpha=0;
      if(sparks[i].trail.length){
        point1.x=point.x;
        point1.y=point.y;
        switch(sparks[i].img){
          case sparkPics[0]:ctx.strokeStyle="#f84";break;
          case sparkPics[1]:ctx.strokeStyle="#84f";break;
          case sparkPics[2]:ctx.strokeStyle="#8ff";break;
          case sparkPics[3]:ctx.strokeStyle="#fff";break;
          case sparkPics[4]:ctx.strokeStyle="#4f8";break;
          case sparkPics[5]:ctx.strokeStyle="#f44";break;
          case sparkPics[6]:ctx.strokeStyle="#f84";break;
          case sparkPics[7]:ctx.strokeStyle="#84f";break;
          case sparkPics[8]:ctx.strokeStyle="#fff";break;
          case sparkPics[9]:ctx.strokeStyle="#44f";break;
        }
        for(j=sparks[i].trail.length-1;j>=0;--j){
          point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
          if(point2.d!=-1){
            ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
            ctx.beginPath();
            ctx.moveTo(point1.x,point1.y);
            ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
            ctx.lineTo(point2.x,point2.y);
            ctx.stroke();
            point1.x=point2.x;
            point1.y=point2.y;
          }
        }
      }
      ctx.globalAlpha=sparks[i].alpha;
      ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
    }
  }
}

function frame(){

  if(frames>100000){
    seedTimer=0;
    frames=0;
  }
  frames++;
  draw();
  doLogic();
  requestAnimationFrame(frame);
}

window.addEventListener("resize",()=>{
  canvas.width=canvas.clientWidth;
  canvas.height=canvas.clientHeight;
  cx=canvas.width/2;
  cy=canvas.height/2;
});

initVars();
frame();
 </script>

3、炫彩光圈

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>star</title>
<script type="text/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(D==9) { D=Math.random()*15; f(1); }
clearTimeout(T);
}
X = e.pageX; // grab mouse pixel coords
Y = e.pageY;
a=0; // previous coord.x
b=0; // previous coord.y 
A = X, // original coord.x
B = Y; // original coord.y
R=(e.pageX/W * 999>>0)/999;
r=(e.pageY/H * 999>>0)/999;
U=e.pageX/H * 360 >>0;
D=9;
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) { a=b=0; R += 0.05 }
d.onmousemove({pageX:300, pageY:290})
}


</script>
</head>

<body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
<canvas id="c"></canvas>
</body>
</html>
LVGL——github的例程进行本地编译
致力于做一名合格的嵌入式软件工程师
02-20 2641
利用LVGL搭建gui框架、使用官方UI编辑器squareline studio绘制UI界面，并在PC模拟器visual studio上模拟
ym——android源码大放送（实战开发必备）
热门推荐
陈宇明
08-10 4万+
文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │   ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMo
网页超炫html特效代码全集
12-16
网页超炫html特效代码全集，网页超炫html特效代码全集
HTML炫酷特效源码
11-07
在代码里输入文字,屏幕上就会出现一串,点击"放松一下"这些文字就会随机扩散,当我们再次点击会列队排列
html初识
最新发布
m0_54069809的博客
04-26 889
html的学习对服务器学习很重要，html文件基本都能在浏览器打开这是一个最简单的开发语言，服务器也是发送html给客户然后断开，等客户操作才会连接服务器，这样能大大减少服务器的压力。
总结了一些 html（H5） 各种 炫酷代码
afufufufu的博客
11-01 2万+
H5炫酷代码
炫酷的HTML代码
baidu_34971492的博客
04-24 2万+
很炫酷的html代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>star</title> <script type="text/javascript"> window.onload = function () { C = Math.cos; // cache Math objects S = Math.si..
一个超炫的htm5效果.超炫
那个谁的空间
09-24 6799
star 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.innerW
HTML好玩代码（正式版）
weixin_39518735的博客
02-22 2602
后期还想看其他Html代码的话，可以去我的主页看HTML的其它代码（VIP）一、圣诞树效果（音乐可自行选择）
炫酷多边形动画生成源码-易语言
06-12
在IT行业中，炫酷的多边形动画是一种广泛应用于游戏、网页、应用程序和视觉设计中的技术，它通过将复杂的图像简化为多个三角形或多边形来创建独特的视觉效果。本资源提供了用易语言、VC++和HTML/JavaScript实现的...
易语言实现炫酷多边形动画源码解析与应用
资源摘要信息:"本资源为易语言编写的炫酷多边形动画生成源码，旨在帮助开发者掌握如何通过随机生成点和线，并利用GDIPlus图形库进行绘制，最终加入缓动效果来实现流畅的动画效果。该资源不仅包含了易语言版本的源码...
HTML炫酷登录模板
06-11
界面非常炫酷，既有动态效果也包含了其所有需要的图片资源
超炫酷代码，HTML格式
06-25
娱乐文档
超炫的html5代码
01-07
HTML5水滴效果，通过canvas、css、js实现的水滴效果，超炫的
html炫酷前段
12-22
很多的源码， 压缩包，文档已经打包好，解压缩，直接使用，建议使用HB
1000套安卓（Android）毕业设计（带论文）、大作业、实例快速下载 （Android Studio）
web13618542420的博客
05-30 5432
ctrl+F 快速定位 序号 类型 项目名称 1 毕业设计 毕业设计-基于安卓Android学生考勤信息管理系统.zip 2 毕业设计 毕业设计-安卓Android教务选课成绩管理系统.zip 3 毕业设计 114基于Android的理财记账本20141215+论文+需求文档+演示视频.zip.zip 4 毕业设计 Android科大讯飞语音识别.zip 5 毕业设计 基于android的点餐系统.zip.zip 6 毕业设计 Android客户端与服务器端的json数据交互(服务端客户端) .zip .
HTML5中一些酷炫又有趣的新特性代码整理汇总
南余.的博客
07-10 5848
HTML5 是 HyperText Markup Language 5 的缩写，HTML5技术结合了HTML4.01的相关标准并革新，符合现代网络发展要求，在2008年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了SVG的内容。HTML5并非仅仅用来表示Web内容，它将 Web带入一个成熟的应用平台，在HTML5平台上，视频、音频、图象、动画，以及同电脑的交互都被标准化。
分享亿个HTML炫酷特效代码
wwrgvjabhf的博客
01-18 5518
【HTML炫酷代码】---老李出品 让你在别人面前好好装一把
好玩的html代码
hfhfekjf的博客
12-13 2093
.
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_755682240

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值