devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

分享亿个HTML炫酷特效代码_炫酷的html代码

作者：寸_铁 | 2024-07-22 12:02:31

赞

踩

炫酷的html代码

目录

一、黑客帝国代码雨

二、发光的文字（可编辑）

三、粒子风暴

四、炫酷鼠标移动特效

五、旋转的星空

六、旋转的立方体

一、黑客帝国代码雨

新建一个文本文档，打开

上代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>黑客帝国代码雨</title>
  5. </head>
  6. <body> <canvas id="canvas"></canvas>
  7.     <style type="text/css">
  8.         body {
  9.             margin: 0;
  10.             padding: 0;
  11.             overflow: hidden;
  12.         }
  13.     </style>
  14.     <script type="text/javascript">
  15.         var canvas = document.getElementById('canvas');
  16.         var ctx = canvas.getContext('2d');
  17.  
  18.  
  19.         canvas.height = window.innerHeight;
  20.         canvas.width = window.innerWidth;
  21.  
  22.         var texts = '156dsfcac'.split('');
  23.  
  24.         var fontSize = 16;
  25.         var columns = canvas.width / fontSize;
  26.         // 用于计算输出文字时坐标，所以长度即为列数
  27.         var drops = [];
  28.         //初始值
  29.         for (var x = 0; x < columns; x++) {
  30.             drops[x] = 1;
  31.         }
  32.  
  33.         function draw() {
  34.             //让背景逐渐由透明到不透明
  35.             ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  36.             ctx.fillRect(0, 0, canvas.width, canvas.height);
  37.             //文字颜色
  38.             ctx.fillStyle = '#0F0';
  39.             ctx.font = fontSize + 'px arial';
  40.             //逐行输出文字
  41.             for (var i = 0; i < drops.length; i++) {
  42.                 var text = texts[Math.floor(Math.random() * texts.length)];
  43.                 ctx.fillText(text, i * fontSize, drops[i] * fontSize);
  44.  
  45.                 if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
  46.                     drops[i] = 0;
  47.                 }
  48.  
  49.                 drops[i]++;
  50.             }
  51.         }
  52.         setInterval(draw, 33);
  53.     </script>
  54. </body>
  55. </html>

后缀改成.html

我以前的作品也有这个教程，链接：教你成为机房最靓的仔-CSDN博客

运行效果：

二、发光的文字（可编辑）

新建文本文档，打开

上代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             /* 初始化 */
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         body{
  15.             /* 100% 窗口高度 */
  16.             min-height: 100vh;
  17.             width: 100%;
  18.             /* 弹性布局 水平+垂直居中 */
  19.             display: flex;
  20.             justify-content: center;
  21.             align-items: center;
  22.             background-color: #06252e;
  23.         }
  24.         .box{
  25.             width: 100%;
  26.             /* 投影效果 */
  27.             -webkit-box-reflect:below 1px linear-gradient(transparent, rgba(0,0,0,0.2));
  28.         }
  29.         h1{
  30.             color: #fff;
  31.             font-size: 96px;
  32.             /* 字间距 */
  33.             letter-spacing: 15px;
  34.             /* 转大写 */
  35.             text-transform: uppercase;
  36.             text-align: center;
  37.             line-height: 76px;
  38.             outline: none;
  39.             /* 自定义属性 --c,可通过 var 函数对其调用 */
  40.             --c:lightseagreen;
  41.             /* 调用自定义属性--c，设置文字阴影（发光效果） */
  42.             text-shadow: 0 0 10px var(--c),
  43.             0 0 20px var(--c),
  44.             0 0 40px var(--c),
  45.             0 0 80px var(--c),
  46.             0 0 160px var(--c);
  47.             /* 执行动画：动画名 时长 线性的 无限次播放 */
  48.             animation: animate 5s linear infinite;
  49.         }
  50.         /* 定义动画 */
  51.         @keyframes animate{
  52.             to{
  53.                 /* 色相旋转过滤镜（设置度数可改变颜色） */
  54.                 filter: hue-rotate(360deg);
  55.             }
  56.         }
  57.     </style>
  58. </head>
  59. <body>
  60.     <div class="box">
  61.         <h1 contenteditable="true">hello</h1>
  62.     </div>
  63. </body>
  64. </html>

后缀改成.html

运行效果：

三、粒子风暴

新建文本文档，打开

输入代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>粒子效果</title>
  6.  
  7. <style>
  8. html,body{
  9. 	margin:0px;
  10. 	width:100%;
  11. 	height:100%;
  12. 	overflow:hidden;
  13.   background:#000;
  14. }
  15.  
  16. #canvas{
  17. 	position:absolute;
  18. 	width:100%;
  19. 	height:100%;
  20. }
  21. </style>
  22.  
  23. </head>
  24. <body>
  25.  
  26. <canvas id="canvas"></canvas>
  27.  
  28. <script>
  29. function project3D(x,y,z,vars){
  30.  
  31. 	var p,d;
  32. 	x-=vars.camX;
  33. 	y-=vars.camY-8;
  34. 	z-=vars.camZ;
  35. 	p=Math.atan2(x,z);
  36. 	d=Math.sqrt(x*x+z*z);
  37. 	x=Math.sin(p-vars.yaw)*d;
  38. 	z=Math.cos(p-vars.yaw)*d;
  39. 	p=Math.atan2(y,z);
  40. 	d=Math.sqrt(y*y+z*z);
  41. 	y=Math.sin(p-vars.pitch)*d;
  42. 	z=Math.cos(p-vars.pitch)*d;
  43. 	var rx1=-1000;
  44. 	var ry1=1;
  45. 	var rx2=1000;
  46. 	var ry2=1;
  47. 	var rx3=0;
  48. 	var ry3=0;
  49. 	var rx4=x;
  50. 	var ry4=z;
  51. 	var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
  52. 	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;
  53. 	var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
  54. 	if(!z)z=0.000000001;
  55. 	if(ua>0&&ua<1&&ub>0&&ub<1){
  56. 		return {
  57. 			x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,
  58. 			y:vars.cy+y/z*vars.scale,
  59. 			d:(x*x+y*y+z*z)
  60. 		};
  61. 	}else{
  62. 		return { d:-1 };
  63. 	}
  64. }
  65.  
  66.  
  67. function elevation(x,y,z){
  68.  
  69. 	var dist = Math.sqrt(x*x+y*y+z*z);
  70. 	if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
  71. 	return 0.00000001;
  72. }
  73.  
  74.  
  75. function rgb(col){
  76.  
  77. 	col += 0.000001;
  78. 	var r = parseInt((0.5+Math.sin(col)*0.5)*16);
  79. 	var g = parseInt((0.5+Math.cos(col)*0.5)*16);
  80. 	var b = parseInt((0.5-Math.sin(col)*0.5)*16);
  81. 	return "#"+r.toString(16)+g.toString(16)+b.toString(16);
  82. }
  83.  
  84.  
  85. function interpolateColors(RGB1,RGB2,degree){
  86. 	
  87. 	var w2=degree;
  88. 	var w1=1-w2;
  89. 	return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]];
  90. }
  91.  
  92.  
  93. function rgbArray(col){
  94.  
  95. 	col += 0.000001;
  96. 	var r = parseInt((0.5+Math.sin(col)*0.5)*256);
  97. 	var g = parseInt((0.5+Math.cos(col)*0.5)*256);
  98. 	var b = parseInt((0.5-Math.sin(col)*0.5)*256);
  99. 	return [r, g, b];
  100. }
  101.  
  102.  
  103. function colorString(arr){
  104.  
  105. 	var r = parseInt(arr[0]);
  106. 	var g = parseInt(arr[1]);
  107. 	var b = parseInt(arr[2]);
  108. 	return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);
  109. }
  110.  
  111.  
  112. function process(vars){
  113.  
  114.  
  115. 	if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);
  116. 	var p,d,t;
  117. 	
  118. 	p = Math.atan2(vars.camX, vars.camZ);
  119. 	d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);
  120. 	d -= Math.sin(vars.frameNo / 80) / 25;
  121. 	t = Math.cos(vars.frameNo / 300) / 165;
  122. 	vars.camX = Math.sin(p + t) * d;
  123. 	vars.camZ = Math.cos(p + t) * d;
  124. 	vars.camY = -Math.sin(vars.frameNo / 220) * 15;
  125. 	vars.yaw = Math.PI + p + t;
  126. 	vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
  127. 	
  128. 	var t;
  129. 	for(var i=0;i<vars.points.length;++i){
  130. 		
  131. 		x=vars.points[i].x;
  132. 		y=vars.points[i].y;
  133. 		z=vars.points[i].z;
  134. 		d=Math.sqrt(x*x+z*z)/1.0075;
  135. 		t=.1/(1+d*d/5);
  136. 		p=Math.atan2(x,z)+t;
  137. 		vars.points[i].x=Math.sin(p)*d;
  138. 		vars.points[i].z=Math.cos(p)*d;
  139. 		vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);
  140. 		if(vars.points[i].y>vars.vortexHeight/2 || d<.25){
  141. 			vars.points.splice(i,1);
  142. 			spawnParticle(vars);
  143. 		}
  144. 	}
  145. }
  146.  
  147. function drawFloor(vars){
  148. 	
  149. 	var x,y,z,d,point,a;
  150. 	for (var i = -25; i <= 25; i += 1) {
  151. 		for (var j = -25; j <= 25; j += 1) {
  152. 			x = i*2;
  153. 			z = j*2;
  154. 			y = vars.floor;
  155. 			d = Math.sqrt(x * x + z * z);
  156. 			point = project3D(x, y-d*d/85, z, vars);
  157. 			if (point.d != -1) {
  158. 				size = 1 + 15000 / (1 + point.d);
  159. 				a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  160. 				if (a > 0) {
  161. 					vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));
  162. 					vars.ctx.globalAlpha = a;
  163. 					vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  164. 				}
  165. 			}
  166. 		}
  167. 	}		
  168. 	vars.ctx.fillStyle = "#82f";
  169. 	for (var i = -25; i <= 25; i += 1) {
  170. 		for (var j = -25; j <= 25; j += 1) {
  171. 			x = i*2;
  172. 			z = j*2;
  173. 			y = -vars.floor;
  174. 			d = Math.sqrt(x * x + z * z);
  175. 			point = project3D(x, y+d*d/85, z, vars);
  176. 			if (point.d != -1) {
  177. 				size = 1 + 15000 / (1 + point.d);
  178. 				a = 0.15 - Math.pow(d / 50, 4) * 0.15;
  179. 				if (a > 0) {
  180. 					vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));
  181. 					vars.ctx.globalAlpha = a;
  182. 					vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  183. 				}
  184. 			}
  185. 		}
  186. 	}		
  187. }
  188.  
  189. function sortFunction(a,b){
  190. 	return b.dist-a.dist;
  191. }
  192.  
  193. function draw(vars){
  194.  
  195. 	vars.ctx.globalAlpha=.15;
  196. 	vars.ctx.fillStyle="#000";
  197. 	vars.ctx.fillRect(0, 0, canvas.width, canvas.height);
  198. 	
  199. 	drawFloor(vars);
  200. 	
  201. 	var point,x,y,z,a;
  202. 	for(var i=0;i<vars.points.length;++i){
  203. 		x=vars.points[i].x;
  204. 		y=vars.points[i].y;
  205. 		z=vars.points[i].z;
  206. 		point=project3D(x,y,z,vars);
  207. 		if(point.d != -1){
  208. 			vars.points[i].dist=point.d;
  209. 			size=1+vars.points[i].radius/(1+point.d);
  210. 			d=Math.abs(vars.points[i].y);
  211. 			a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;
  212. 			vars.ctx.globalAlpha=a>=0&&a<=1?a:0;
  213. 			vars.ctx.fillStyle=rgb(vars.points[i].color);
  214. 			if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
  215. 		}
  216. 	}
  217. 	vars.points.sort(sortFunction);
  218. }
  219.  
  220.  
  221. function spawnParticle(vars){
  222.  
  223. 	var p,ls;
  224. 	pt={};
  225. 	p=Math.PI*2*Math.random();
  226. 	ls=Math.sqrt(Math.random()*vars.distributionRadius);
  227. 	pt.x=Math.sin(p)*ls;
  228. 	pt.y=-vars.vortexHeight/2;
  229. 	pt.vy=vars.initV/20+Math.random()*vars.initV;
  230. 	pt.z=Math.cos(p)*ls;
  231. 	pt.radius=200+800*Math.random();
  232. 	pt.color=pt.radius/1000+vars.frameNo/250;
  233. 	vars.points.push(pt);	
  234. }
  235.  
  236. function frame(vars) {
  237.  
  238. 	if(vars === undefined){
  239. 		var vars={};
  240. 		vars.canvas = document.querySelector("canvas");
  241. 		vars.ctx = vars.canvas.getContext("2d");
  242. 		vars.canvas.width = document.body.clientWidth;
  243. 		vars.canvas.height = document.body.clientHeight;
  244. 		window.addEventListener("resize", function(){
  245. 			vars.canvas.width = document.body.clientWidth;
  246. 			vars.canvas.height = document.body.clientHeight;
  247. 			vars.cx=vars.canvas.width/2;
  248. 			vars.cy=vars.canvas.height/2;
  249. 		}, true);
  250. 		vars.frameNo=0;
  251.  
  252. 		vars.camX = 0;
  253. 		vars.camY = 0;
  254. 		vars.camZ = -14;
  255. 		vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
  256. 		vars.yaw = 0;
  257. 		vars.cx=vars.canvas.width/2;
  258. 		vars.cy=vars.canvas.height/2;
  259. 		vars.bounding=10;
  260. 		vars.scale=500;
  261. 		vars.floor=26.5;
  262.  
  263. 		vars.points=[];
  264. 		vars.initParticles=700;
  265. 		vars.initV=.01;
  266. 		vars.distributionRadius=800;
  267. 		vars.vortexHeight=25;
  268. 	}
  269.  
  270. 	vars.frameNo++;
  271. 	requestAnimationFrame(function() {
  272. 		frame(vars);
  273. 	});
  274.  
  275. 	process(vars);
  276. 	draw(vars);
  277. }
  278. frame();
  279. </script>
  280.  
  281. <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  282. <p><a href="http://sc.chinaz.com/" target="_blank"></a></p>
  283. </div>
  284. </body>
  285. </html>

后缀改成.html

运行效果：

四、炫酷鼠标移动特效

新建文本文档，打开

输入代码：
 

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  3. <head>
  4. <title>star</title>
  5. <script type="text/javascript">
  6. window.onload = function () {
  7. C = Math.cos; // cache Math objects
  8. S = Math.sin;
  9. U = 0;
  10. w = window;
  11. j = document;
  12. d = j.getElementById("c");
  13. c = d.getContext("2d");
  14. W = d.width = w.innerWidth;
  15. H = d.height = w.innerHeight;
  16. c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
  17. c.globalCompositeOperation = "lighter";  // switch to additive color application
  18. c.lineWidth = 0.2;
  19. c.lineCap = "round";
  20. var bool = 0, 
  21. t = 0; // theta
  22. d.onmousemove = function (e) {
  23. if(window.T) {
  24. if(D==9) { D=Math.random()*15; f(1); }
  25. clearTimeout(T);
  26. }
  27. X = e.pageX; // grab mouse pixel coords
  28. Y = e.pageY;
  29. a=0; // previous coord.x
  30. b=0; // previous coord.y 
  31. A = X, // original coord.x
  32. B = Y; // original coord.y
  33. R=(e.pageX/W * 999>>0)/999;
  34. r=(e.pageY/H * 999>>0)/999;
  35. U=e.pageX/H * 360 >>0;
  36. D=9;
  37. g = 360 * Math.PI / 180;
  38. T = setInterval(f = function (e) { // start looping spectrum
  39. c.save();
  40. c.globalCompositeOperation = "source-over"; // switch to additive color application
  41. if(e!=1) {
  42. c.fillStyle = "rgba(0,0,0,0.02)";
  43. c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
  44. }
  45. c.restore();
  46. i = 25; while(i --) {
  47. c.beginPath();
  48. if(D > 450 || bool) { // decrease diameter
  49. if(!bool) { // has hit maximum
  50. bool = 1;
  51. }
  52. if(D < 0.1) { // has hit minimum
  53. bool = 0;
  54. }
  55. t -= g; // decrease theta
  56. D -= 0.1; // decrease size
  57. }
  58. if(!bool) {
  59. t += g; // increase theta
  60. D += 0.1; // increase size
  61. }
  62. q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
  63. x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); // center on xy coords
  64. y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
  65. if (a) { // draw once two points are set
  66. c.moveTo(a, b);
  67. c.lineTo(x, y)
  68. }
  69. c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
  70. c.stroke();
  71. a = x; // set previous coord.x
  72. b = y; // set previous coord.y
  73. }
  74. U -= 0.5; // increment hue
  75. A = X; // set original coord.x
  76. B = Y; // set original coord.y
  77. }, 16);
  78. }
  79. j.onkeydown = function(e) { a=b=0; R += 0.05 }
  80. d.onmousemove({pageX:300, pageY:290})
  81. }
  82.  
  83.  
  84. </script>
  85. </head>
  86.  
  87. <body style="margin:0px;padding:0px;width:100%;height:100%;overflow:hidden;">
  88. <canvas id="c"></canvas>
  89. </body>
  90. </html>

后缀改成.html

运行效果：

五、旋转的星空

新建文本文档，打开

上代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>旋转的星空</title>
  6. <style type="text/css">
  7. body{background: black;padding: 0;margin: 0; overflow:hidden}
  8. .header{margin: 0 auto;width: 100%;height: 100%;background-color: #000;position: relative;}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="header"><canvas id="canvas"></canvas></div>
  13. <script>
  14. var canvas = document.getElementById('canvas'),
  15. ctx = canvas.getContext('2d'),
  16. w = canvas.width = window.innerWidth,
  17. h = canvas.height = window.innerHeight,
  18. hue = 217,
  19. stars = [],
  20. count = 0,
  21. maxStars = 3000;//星星数量
  22. var canvas2 = document.createElement('canvas'),
  23. ctx2 = canvas2.getContext('2d');
  24. canvas2.width = 100;
  25. canvas2.height = 100;
  26. var half = canvas2.width / 2,
  27. gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
  28. gradient2.addColorStop(0.025, '#CCC');
  29. gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
  30. gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
  31. gradient2.addColorStop(1, 'transparent');
  32. ctx2.fillStyle = gradient2;
  33. ctx2.beginPath();
  34. ctx2.arc(half, half, half, 0, Math.PI * 2);
  35. ctx2.fill();
  36. // End cache
  37. function random(min, max) {
  38. if (arguments.length < 2) {
  39. max = min;
  40. min = 0;
  41. }
  42. if (min > max) {
  43. var hold = max;
  44. max = min;
  45. min = hold;
  46. }
  47. return Math.floor(Math.random() * (max - min + 1)) + min;
  48. }
  49. function maxOrbit(x, y) {
  50. var max = Math.max(x, y),
  51. diameter = Math.round(Math.sqrt(max * max + max * max));
  52. return diameter / 2;
  53. //星星移动范围，值越大范围越小，
  54. }
  55. var Star = function() {
  56. this.orbitRadius = random(maxOrbit(w, h));
  57. this.radius = random(60, this.orbitRadius) / 8;
  58. //星星大小
  59. this.orbitX = w / 2;
  60. this.orbitY = h / 2;
  61. this.timePassed = random(0, maxStars);
  62. this.speed = random(this.orbitRadius) / 50000;
  63. //星星移动速度
  64. this.alpha = random(2, 10) / 10;
  65. count++;
  66. stars[count] = this;
  67. }
  68. Star.prototype.draw = function() {
  69. var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
  70. y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
  71. twinkle = random(10);
  72. if (twinkle === 1 && this.alpha > 0) {
  73. this.alpha -= 0.05;
  74. } else if (twinkle === 2 && this.alpha < 1) {
  75. this.alpha += 0.05;
  76. }
  77. ctx.globalAlpha = this.alpha;
  78. ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  79. this.timePassed += this.speed;
  80. }
  81. for (var i = 0; i < maxStars; i++) {
  82. new Star();
  83. }
  84. function animation() {
  85. ctx.globalCompositeOperation = 'source-over';
  86. ctx.globalAlpha = 0.5; //尾巴
  87. ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
  88. ctx.fillRect(0, 0, w, h)
  89. ctx.globalCompositeOperation = 'lighter';
  90. for (var i = 1, l = stars.length; i < l; i++) {
  91. stars[i].draw();
  92. };
  93. window.requestAnimationFrame(animation);
  94. }
  95. animation();
  96. </script>
  97. </body>
  98. </html>

后缀改成.html

运行效果：

六、旋转的立方体

新建文本文档，打开

直接上代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <title>旋转立方体</title>
  6.     <style>
  7.       #cube {
  8.         width: 200px;
  9.         height: 200px;
  10.         position: relative;
  11.         transform-style: preserve-3d;
  12.         animation: rotate 6s infinite linear;
  13. 		margin: 100px auto;
  14.       }
  15.       
  16.       #cube div {
  17.         position: absolute;
  18.         width: 200px;
  19.         height: 200px;
  20.         background-color: rgba(0, 255, 255, 0.5);
  21.         border: 2px solid #333;
  22.       }
  23.       
  24.       #cube .front {
  25.         transform: translateZ(100px);
  26.       }
  27.       
  28.       #cube .back {
  29.         transform: rotateY(180deg) translateZ(100px);
  30.       }
  31.       
  32.       #cube .right {
  33.         transform: rotateY(90deg) translateZ(100px);
  34.       }
  35.       
  36.       #cube .left {
  37.         transform: rotateY(-90deg) translateZ(100px);
  38.       }
  39.       
  40.       #cube .top {
  41.         transform: rotateX(90deg) translateZ(100px);
  42.       }
  43.       
  44.       #cube .bottom {
  45.         transform: rotateX(-90deg) translateZ(100px);
  46.       }
  47.       
  48.       @keyframes rotate {
  49.         0% {
  50.           transform: rotateX(0) rotateY(0) rotateZ(0);
  51.         }
  52.         100% {
  53.           transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  54.         }
  55.       }
  56.     </style>
  57.   </head>
  58.   <body>
  59.     <div id="cube">
  60.       <div class="front"></div>
  61.       <div class="back"></div>
  62.       <div class="right"></div>
  63.       <div class="left"></div>
  64.       <div class="top"></div>
  65.       <div class="bottom"></div>
  66.     </div>
  67.     <script>
  68.       const cube = document.querySelector('#cube');
  69.       let isPaused = false;
  70.       
  71.       cube.addEventListener('mouseover', () => {
  72.         isPaused = true;
  73.         cube.style.animationPlayState = 'paused';
  74.       });
  75.       
  76.       cube.addEventListener('mouseout', () => {
  77.         isPaused = false;
  78.         cube.style.animationPlayState = 'running';
  79.       });
  80.       
  81.       setInterval(() => {
  82.         if (!isPaused) {
  83.           cube.style.animationPlayState = 'running';
  84.         }
  85.       }, 1000);
  86.     </script>
  87.   </body>
  88. </html>

后缀改成.html

运行效果：

先做到这了，以后再有我会接着做，886！

附：HTML小指南（转载Carefree1990大神的作品）

原链接：https://blog.csdn.net/weixin_42400955/article/details/81106697

资源下载放在文章顶部了

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号