html特效页面（1）--黑客帝国代码雨

最新推荐文章于 2025-02-27 22:08:14 发布

GreefGu

最新推荐文章于 2025-02-27 22:08:14 发布

阅读量2.7k

点赞数 5

分类专栏： html分享文章标签： html 前端 css

本文链接：https://blog.csdn.net/mangchong233/article/details/122968783

版权

html分享专栏收录该内容

2 篇文章

订阅专栏

本系列为html网页特效小代码，详细标注注释。
可以在菜鸟工具进行网页编译测试：菜鸟工具
未经本人允许请勿转载，谢谢

<!DOCTYPE html><html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MGT-404</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background: black;  <!--此处调整初次闪屏背景颜色-->
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="ad"></canvas>
    <script>
      var ad = document.getElementById("ad");
      var ctx = ad.getContext("2d");
      ad.height = window.innerHeight;
      ad.width = window.innerWidth;
      var chinese = "GREEF";   <!--此处添加需要显示的文字-->
      chinese = chinese.split("");
      var font_size = 10;  <!--此处调整字符大小-->
      var columns = ad.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, ad.width, ad.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)];  <!--此处修改成text="具体文字"  可以实现只显示固定文字无随机闪烁效果-->
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > ad.height && Math.random() > 0.975)  <!--此处最后一个参数调整文字离散程度，数字越小越密集-->
            drops[i] = 0;
          drops[i]++;
        }
      }
      setInterval(draw, 70); <!--此处调整下落速度，数字越小越快-->
    </script>
  </body>
</html>