HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

2024-09-27 13:20:56

我们先看看HTML+JS实现“代码雨”的最终效果

1、绿色：

2、彩色：

3、背景色：

4、绿色逐渐变浅：

源代码：

<!DOCTYPE html>
<html>

<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>Code -by ZhenYu.Sha</title>
 <style type="text/css">
  html, body {
   width: 100%;
   height: 100%;
  }
  body {
   background: #000;
   overflow: hidden;
   margin: 0;
   padding: 0;
  }
 </style>
</head>

<body>
<canvas id="cvs"></canvas>
<script type="text/javascript">
 var cvs = document.getElementById("cvs");
 var ctx = cvs.getContext("2d");
 var cw = cvs.width = document.body.clientWidth;
 var ch = cvs.height = document.body.clientHeight;
 //动画绘制对象
 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 var codeRainArr = []; //代码雨数组
 var cols = parseInt(cw / 14); //代码雨列数
 var step = 16;  //步长，每一列内部数字之间的上下间隔
 ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑

 function createColorCv() {
  //画布基本颜色
  ctx.fillStyle = "#242424";
  ctx.fillRect(0, 0, cw, ch);
 }

 //创建代码雨
 function createCodeRain() {
  for (var n = 0; n < cols; n++) {
   var col = [];
   //基础位置，为了列与列之间产生错位
   var basePos = parseInt(Math.random() * 300);
   //随机速度 3~13之间
   var speed = parseInt(Math.random() * 10) + 3;
   //每组的x轴位置随机产生
   var colx = parseInt(Math.random() * cw)

   //绿色随机
   var rgbr = 0;
   var rgbg = parseInt(Math.random() * 255);
   var rgbb = 0;
   //ctx.fillStyle = "rgb("+r+','+g+','+b+")"

   for (var i = 0; i < parseInt(ch / step) / 2; i++) {
    var code = {
     x: colx,
     y: -(step * i) - basePos,
     speed: speed,
     // text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //随机生成0或者1
     text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
     color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
    }
    col.push(code);
   }
   codeRainArr.push(col);
  }
 }

 //代码雨下起来
 function codeRaining() {
  //把画布擦干净
  ctx.clearRect(0, 0, cw, ch);
  //创建有颜色的画布
  //createColorCv();
  for (var n = 0; n < codeRainArr.length; n++) {
   //取出列
   col = codeRainArr[n];
   //遍历列，画出该列的代码
   for (var i = 0; i < col.length; i++) {
    var code = col[i];
    if (code.y > ch) {
     //如果超出下边界则重置到顶部
     code.y = 0;
    } else {
     //匀速降落
     code.y += code.speed;
    }

    //1 颜色也随机变化
    //ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 

    //2 绿色逐渐变浅
    // ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)"; 

    //3 绿色随机
    // var r= 0;
    // var g= parseInt(Math.random()*255) + 3;
    // var b= 0;
    // ctx.fillStyle = "rgb("+r+','+g+','+b+")";

    //4 一致绿
    ctx.fillStyle = code.color;

    //把代码画出来
    ctx.fillText(code.text, code.x, code.y);
   }
  }
  requestAnimationFrame(codeRaining);
 }

 //创建代码雨
 createCodeRain();
 //开始下雨吧 GO>>
 requestAnimationFrame(codeRaining);
</script>

</body>
</html>

本文主要介绍了HTML+JS实现“代码雨”效果源码，更多关于JS特效请查看下面的相关链接

JS实现简单日历特效

本文实例为大家分享了JS实现简单日历特效的具体代码,供大家参考,具体内容如下知识点 1.引入我的工具包 2.运用JavaScript内置对象 Date 运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pa
js实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g
JS实现导航栏楼层特效

本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库运行效果导航与界面实现互动代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
javascript实现鼠标点击生成文字特效

前端实用脚本(鼠标点击生成文字特效) 你好! 这是你第一次写博客目的是为了记录常用到的技术知识以供同行参考学习和方便自己以后查阅前言最近在浏览一些博客的时候总是能够看到,当我点击鼠标的时候鼠标位置就会出现文字然后往上方浮动.当时比较好奇,然后空闲时间就去百度了一下这种效果是怎么实现的,然后结合一些博客整理了一下. 旧版本 1.单一的浮动效果 ,旧版本的只有一种颜色,比较单调: 2.没有遵循 : 可以run的demo才是好demo的原则新版本 1.筛选了多种好看的颜色样式 2.复制代码到
javascript实现超好看的3D烟花特效

本文实例为大家分享了超好看3D烟花的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>3D烟花</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #c
JS实现音乐钢琴特效

本文实例为大家分享了JS实现音乐钢琴的具体代码,供大家参考,具体内容如下知识点 1.keydown键盘按下事件 2.ev['keyCode'] 获取当前按键 3.引入工具库工具库运行效果 1-9控制按键代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <styl
JS实现黑客帝国文字下落效果

代码一: 黑客帝国文字下落效果查看效果源码下载源代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>黑客帝国文字下落</title> <style> html, body {margin:0; padding:0; background-color:#000;} #divList {width:800px; h
JS实现商品橱窗特效

本文实例为大家分享了JS实现商品橱窗特效的具体代码,供大家参考,具体内容如下知识点换算公式 ① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度滚动条长度/盒子的长度 = 盒子的长度/内容的长度 ② 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
js模拟实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下如下图首先描绘圆周运动 // d1 /*css*/ div{ height: 4px; width: 4px; background: red; position: absolute; } //js var div = document.getElementById('div'); // 画运动点 document.getElementsByTagName('body')[0].appendChild(tdiv); //
JS实现音乐导航特效

本文实例为大家分享了JS实现音乐导航特效的具体代码,供大家参考,具体内容如下知识点 1.audio.play() 播放音频 2.audio.currentTime = 0 从头开始播放 3.引入工具库工具库运行效果< 鼠标进入后,播放音频代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></ti
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo
JS实现吸顶特效

本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下知识点 1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶 3.添加一个固定类,如果满足条件,为nav加类名运行效果滚动页面时,保证导航栏吸顶代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
Javascript实现鼠标点击冒泡特效

本文实例为大家分享了js鼠标点击冒泡的具体代码,供大家参考,具体内容如下一个用JS写的鼠标左击特效点击鼠标左键会出现红心"❤"或者字符表情"(๑•́ ₃ •̀๑)"- 常用Emoji 可以自行替换,如需复制,请从底部链接移步至Github 代码 onload = function() { var click_cnt = 0; var $html = document.getElementsByTagName("html")[0]; var $
js仿黑客帝国字母掉落效果代码分享

看过黑客帝国的朋友或许都对开头的字幕效果很熟悉,自从影片播放以来,网页设计者有不少都在模仿这种字母掉落的效果,而且最后还有文字显现效果"I love you",你可以稍加修改,在情人节,用来对你的恋人表白哦~ 运行效果图: 大家也动手运行一下, ----------------效果演示---------------- 为大家分享js仿黑客帝国字母掉落效果代码如下 <head> <meta htt
JS实现小星星特效

本文实例为大家分享了JS实现小星星特效的具体代码,供大家参考,具体内容如下鼠标点击窗口实现如图效果: 看起来是不是很像小星星呀代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body style="background-color: #000000;"&g
JavaScript实现联动菜单特效

一篇关于JavaScript特效的文章,今天给大家带来联动菜单特效,这可能是一个系列哦! 效果图和以前一样,先发效果图,然后在进行讲解. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&l
JS实现星星海特效

本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下知识点 1.CSS使用@keyframes自定义动画,使用animation调用自定义动画 2.opacity 透明度.从 0.0 (完全透明)到 1.0(完全不透明) 3.CSS中transform 4.animation-delay 属性定义动画何时开始. 5.求屏幕尺寸 var 宽 = document.documentElement.clientWidth; var 高 = document.documentEl
JS实现秒杀倒计时特效

本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下知识点添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库运行效果代码引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div
JS实现电商商品展示放大镜特效

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
JS实现图片切换特效

本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下知识点: 1.window.onload网页全部加载完后再执行 2.获取元素设置属性 3.临界情况判断运行效果: 点击上一张下一章切换图片代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
JS实现普通轮播图特效

本文实例为大家分享了JS实现轮播图特效的具体代码,供大家参考,具体内容如下知识点轮播图思想: ① 建立一个全局变量索引,始终标记当前显示图片. ② 根据当前图片的数量,动态创建下方的●图片指示器. ③ 轮播图的初始状态为第一张图片在中间,剩余所有图片均放在即将显示图片位置. ④ 当点击>的时候,当前图片调用动画移动函数进行左移,与此同时新的一张图片调用动画函数移入到div中,而会将下一张展示的图片移动到div右侧. ⑤ 需要进行边界判断,如果当前的图片大于图片数量或者小于等于0,重新给索引赋

HTML+JS实现“代码雨”效果源码（黑客帝国文字下落效果）

相关推荐

随机推荐