效果如下

代码如下

<!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. java程序员在交接别人的工作时如何保证顺利交接？

    序言 各位好啊,我是会编程的蜗牛,作为java开发者,尤其是在职场混迹了多年的老手,肯定会遇到同事离职的情况,或者自己跳槽的情况,这些都免不了需要做好交接工作,不管是别人交接给我们,还是我们交接给别人 ...

  2. maven 重复依赖不同版本 选择规则

    maven 重复依赖不同版本 选择规则 本篇主要来看看 maven 对于 重复依赖的jar的不同版本时候 它内部的选择规则, 很多时候我们在搭建环境的时候 不注意就会存在依赖冲突等问题 那依赖冲突的时 ...

  3. nrf9160做主控连接阿里云——（mqtt_simple例程）

    简介:基本每一个云都支持MQTT,这种轻量级协议在数据量不大的应用上是一个很好的选择.上一篇博客使用SLM例程去连接了阿里云,本次使用mqtt_simple去连接云进行测试,关于一些已近在前面文章中演 ...

  4. DQL-模糊查询

    DQL-模糊查询 模糊查询即模糊检索,是指搜索系统自动按照用户输入关键词的同义词进行模糊检索,从而得出较多的检索结果.与之相反的是"精准搜索".模糊检索也可以说是同义词检索,这里的 ...

  5. Excel中的VLOOKUP函数

    VLOOKUP函数是Excel中的一个纵向查找函数,功能是按列查找,最终返回该列所需查询序列所对应的值. 该函数的语法规则如下: VLOOKUP(lookup_value,table_array,co ...

  6. Seata Server 1.5.2 源码学习

    Seata 包括 Server端和Client端.Seata中有三种角色:TC.TM.RM,其中,Server端就是TC,TM和RM属Client端.Client端的源码学习上一篇已讲过,详见 < ...

  7. [leetcode] 706. Design HashMap

    题目 Design a HashMap without using any built-in hash table libraries. Implement the MyHashMap class: ...

  8. 10、数组a和b各有10个元素。将他们相同的位置元素逐个比较， 如果a中元素大于b中对应元素的次数多于b数组中元素大于a中元素的次数， 则认为a大于b。请统计大于等于小于的次数

    /* 数组a和b各有10个元素.将他们相同的位置元素逐个比较, 如果a中元素大于b中对应元素的次数多于b数组中元素大于a中元素的次数, 则认为a大于b.请统计大于等于小于的次数 */ #include ...

  9. vim快捷键及命令大全

    定位光标: G 将光标定位到文本末尾行首 gg 将光标定位到文本启始位置 0 (这个是零)定位到光标所在行行首 $ 定位到光标所在行行尾 数字G 跳转到第n行 移动光标: h 向左移动 l 向右移动 ...

  10. POST请求发送的表单数据和json数据的区别及python代码实现

    前言 这篇博客会介绍最常见post 请求form表单数据和json数据 数据类型之间的区别, urllib代码的实现(python), requests库实现, 以及如何使用postman软件发送这些 ...