“代码雨”纯HTML源码实现及效果
先看看效果
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或者1text: ["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>
更多代码雨的文章请参考我的其它文章:
“代码雨”js+css+html实现:https://blog.csdn.net/u014597198/article/details/71423269
“代码雨”纯HTML源码实现及效果相关推荐
- 用Html5实现天气预报的原理,HTML5 Canvas和jQuery实时天气预报代码解析「附源码」...
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」 这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效.该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下 ...
- FreeMarker_模板引擎_代码自动生成器_源码下载
首先我们先来认识一下Freemarker 1.what is the FreeMarker? 你可以到freemarker的官网上去,那里有很详细的介绍:http://freemarker.org/ ...
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...
- HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表 ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
- HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白 ...
最新文章
- [译]ES6新特性:八进制和二进制整数字面量
- CSP认证201604-4	游戏[C++题解]:bfs、拆点、迷宫问题加强版、三维数组
- 快速下载Spring官网下载dist.zip中所有jar,例如spring-5.2.10.RELEASE-dist.zip
- 通向架构师的道路(第七天)之漫谈使用ThreadLocal改进你的层次的划分
- fluent瞬态计算终止条件在哪里设置_Fluent案例7【圆柱绕流】
- 基本的排序算法php,php四种基础排序算法
- TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
- WAS集群系列(3):集群搭建:步骤1:准备文件
- 编曲技巧:使用FL Studio来制作停顿的效果
- 功夫小子实践开发-具有简单AI的怪物类的分析和实现
- Day004 20210209-20210217
- 对数幅度谱图像matlab,幅度谱 fft2绘制图像的对数幅度谱,比较图像旋转、平移和缩放后的频谱...
- java一个字符几个字节_Java 语言中一个字符占几个字节?
- 【算法设计与分析】经典常考三十三道例题AC代码
- 苹果虚拟home键_苹果手机几个实用小技巧,相见恨晚,快试试你的手机!
- VPP使用详解——基于VPP的VLAN配置
- java int溢出,结果只会保留低32位,高位会抛弃掉
- SSH远程管理及sshd服务支持验证方式
- git push报错:error: failed to push some refs to ‘https:/
- 通过油猴子脚本改造iconfont页面,使得直接带i标签复制
热门文章
- 销售方法总结思维导图模板分享
- Office文档修复介绍之:laola文件格式介绍
- Git安装包(win64)镜像下载地址
- 金字塔原理读书笔记 一 为什么使用金字塔结构
- SRA数据下载以及转换格式
- CMMI 2.0 和 1.3
- python处理excel数据计算_Python处理Excel数据
- matlab yalmip cplex,matlab – CPLEX YALMIP – “未找到解算器”?
- MySQL数据库学习路径 链接汇总
- IntelliJ Idea 常用11款插件(提高开发效率),附优秀主题插件