效果如下

代码如下

<!DOCTYPE html><html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>炫酷科技感黑客感瀑布流html代码</title>

    <style>

      * {

        margin: 0;

        padding: 0;

      }

      body {

        background: black;

      }

      canvas {

        display: block;

      }

    </style>

  </head>

  <body>

    <canvas id="waterfall"></canvas>

    <script>

      var waterfall = document.getElementById("waterfall");

      var ctx = waterfall.getContext("2d");

      waterfall.height = window.innerHeight;

      waterfall.width = window.innerWidth;

      var chinese = "瀑布流瀑布流瀑布流";

      chinese = chinese.split("");

      var font_size = 10;

      var columns = waterfall.width / font_size;

      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, waterfall.width, waterfall.height);

        ctx.fillStyle = "#0F0";

        ctx.font = font_size + "px arial";

        for (var i = 0; i < drops.length; i++) {

          var text = chinese[Math.floor(Math.random() * chinese.length)];

          ctx.fillText(text, i * font_size, drops[i] * font_size);

          if (drops[i] * font_size > waterfall.height && Math.random() > 0.975)

            drops[i] = 0;

          drops[i]++;

        }

      }

      setInterval(draw, 50);

    </script>

  </body>

</html>

炫酷科技感黑客感瀑布流html代码的更多相关文章

  1. js实现的美女瀑布流效果代码

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. 炫酷：一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

  3. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  4. Recycler实现瀑布流

    (开发环境Android studio) 首先,在开发环境中添加引用(在外层的build.gradle文件下的dependencies里面添加如下引用) implementation 'com.and ...

  5. iOS 瀑布流封装

    代码地址如下:http://www.demodashi.com/demo/12284.html 一.效果预览 功能描述:WSLWaterFlowLayout 是在继承于UICollectionView ...

  6. iOS 两个tableview的 瀑布流

    iOS 两个tableview的 瀑布流1. [代码]Objective-C     ////  DocViewController.m//  getrightbutton////  Created ...

  7. 基于Bootstrap v4.1.1 & Bootstrap-table-1.14.1实现数据瀑布流

    基于Bootstrap-table-1.14.1实现数据瀑布流 HTML代码 <div id="AvgWaitAndAvgTimeServiceTimeData_hall"& ...

  8. 炫酷的jquery瀑布流

    最近做了一个瀑布流效果,思路很简单 首先计算屏幕一行可以放多少个图片,然后在第二行开始,计算每一列的高度并取出最小值,将新图片加载在最小列高度下,如此循环,并且设定一个条件,当滑动到一定距离后,开始重 ...

  9. android炫酷动画源码，QQ菜单、瀑布流、二维码源码

    Android精选源码 自定义弹框封装,ProgressDialog,StatusDialog和Toast,支持自定义颜色 有深度感的fragment代码 在屏幕顶部或者底部显示提示 短信转发工具,自 ...

  10. android实现超酷的腾讯视频首页和垂直水平网格瀑布流一揽子效果

    代码地址如下:http://www.demodashi.com/demo/13381.html 先来一波demo截图 实现ListView.GridView.瀑布流 1.导入RecyclerView的 ...

随机推荐

  1. C# String.IsNullOrEmpty()方法的使用

    IsNullOrEmpty(string)是String类的一个有参的方法,方法需要类的调用,所以String.IsNullOrEmpty(string) IsNullOrEmpty是判断字符串的Nu ...

  2. 关于Object.keys()和Object.values()的使用

    关于Object.keys()和Object.values()的使用 1. 关于Object.keys() 1) 处理对象,返回可枚举的所有可枚举属性的字符串数组 let person ={ name ...

  3. 二十六、StatefulSet资源控制器

    StatefulSet资源控制器 一.statefulset介绍 StatefulSet 是为了解决有状态服务的问题而设计的资源控制器. 匹配 Pod name ( 网络标识 ) 的模式为:(stat ...

  4. 云原生之旅 - 6）不能错过的一款 Kubernetes 应用编排管理神器 Kustomize

    前言 相信经过前一篇文章的学习,大家已经对Helm有所了解,本篇文章介绍另一款工具 Kustomize,为什么Helm如此流行,还会出现 Kustomize?而且 Kustomize 自 kubect ...

  5. python 爬虫 TCL SSL 安全证书问题

    其实很复杂 但也很简单 只需要在requests爬虫编写前 加上这句话 requests.packages.urllib3.util.ssl_.DEFAULT_CIPHERS = 'DH+AES:RS ...

  6. Codeforces Round #811 (Div. 3)D. Color with Occurrences

    题目大意:给出一个文章t和n个字符串s1,s2...sn: 问能否用这n个字符串将整个文章覆盖: 思路:贪心(最小区间覆盖) 记录每个字符串能够覆盖的所有位置(起点,终点,编号) 排序后贪心的求出是否 ...

  7. windows中 mysql 免安装版安装

    基本安装 绝对路径中避免出现中文,推荐首选英文为命名条件! 以管理员身份打开命令行,并转到mysql的bin目录下 安装mysql服务 mysqld --install 若出现以下错误,需将缺失的文件 ...

  8. EXCEL_BASIC

    公式类 比较大小 A1单元格的值大于B1单元格时为"A",小于时为"a",等于时为"e" =IF(A1>B1,"A" ...

  9. linux系统启动达梦迁移工具失败解决办法

    在达梦数据库服务端的tool目录下执行./dts来启动迁移工具,迁移工具启动前出现报错,以下提供几种遇到问题的解决办法: 1. 报错1: 执行./dts,报错提示: [yyuser@qy-ggyf-z ...

  10. 探讨Morest在RESTful API测试的行业实践

    摘要:在本文中,我们将重点探讨使用自动化智能化Morest测试技术在RESTful API测试的行业实践. 本文分享自华为云社区<[智能化测试专题]华为云API智能测试工具--Morest测试框 ...