JavaScript实现代码雨效果

本文实例为大家分享了JavaScript实现代码雨效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>代码雨demo</title>
</head>
<style>
  * {
    padding: 0px;
    margin: 0px;
  }
 
  body,
  html {
    width: 100%;
    height: 100%;
  }
 
  #libao {
    width: fit-content;
    height: 100%;
    display: flex;
    font-size: 10px;
    background: #000;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }
 
  span {
    min-width: 15px;
    /* 栅栏格最小宽度 */
    font-size: 10px;
    color: #58bc5b;
    position: relative;
  }
 
  p {
    width: 100%;
    position: absolute;
    text-align: center;
  }
 
  .color6 {
    color: #58bc5b;
  }
 
  .color5 {
    color: #58bc5bd6;
  }
 
  .color4 {
    color: #58bc5ba8;
  }
 
  .color3 {
    color: #58bc5b60;
  }
 
  .color2 {
    color: #58bc5b28;
  }
 
  .color1 {
    color: #58bc5b10;
  }
</style>
 
<body>
  <div id="libao">
  </div>
  
</body>
 
</html>

效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    我们先看看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>

  • js+canvas实现代码雨效果

    js+canvas实现代码雨效果

    本文实例为大家分享了js+canvas代码雨效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } html,body{ height:

  • JS实现代码雨特效

    JS实现代码雨特效

    本文实例为大家分享了JS实现代码雨特效的具体代码,供大家参考,具体内容如下 html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码 window.onload = function() {          //获取画布对象          var canvas = document.getElementById(&qu

  • JavaScript canvas实现代码雨效果

    JavaScript canvas实现代码雨效果

    本文实例为大家分享了canvas实现代码雨效果的具体代码,供大家参考,具体内容如下 先看效果图 这个效果图是不是像极了以前电影里面的黑客技术,看起来蛮难的,其实操作起来还是挺简单的. canvas其实就是画布的意思 首先我们得有一个画布 <body> <canvas id="canvas"></canvas> </body> 再设这样一个背景 HTML部分 <body> <canvas id="canvas&q

  • 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

  • JavaScript实现代码雨效果

    JavaScript实现代码雨效果

    本文实例为大家分享了JavaScript实现代码雨效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <meta name=

  • JavaScript实现字符雨效果

    JavaScript实现字符雨效果

    本文实例为大家分享了JavaScript实现字符雨效果的具体代码,供大家参考,具体内容如下 <html>     <head>         <meta charset="utf8"/>         <title>字符雨</title>         <style>             body {                 color:white;                 backgro

  • 利用JS打造黑客代码雨效果

    利用JS打造黑客代码雨效果

    目录 演示 技术栈 源码 画布 js样式设置 演示 技术栈 js实战我们也写过很多了,其中每次几乎都用到画布,大家知道它的重要性了吧.今天依旧用到它了.不过我们讲过它的用法就不多说了. 这次我们说一下window.onload window.onload() 方法用于在网页加载完毕后立刻执行的操作,即当 HTML 文档加载完毕后,立刻执行某个方法. window.onload() 通常用于 元素,在页面完全载入后(包括图片.css文件等等)执行脚本代码. 只有一个要执行的函数语法: window

  • Python实现屏幕代码雨效果的示例代码

    Python实现屏幕代码雨效果的示例代码

    直接上代码 import pygame import random def main(): # 初始化pygame pygame.init() # 默认不全屏 fullscreen = False # 窗口未全屏宽和高 WIDTH, HEIGHT = 1100, 600 init_width, init_height = WIDTH, HEIGHT # 字块大小,宽,高 suface_height = 18 # 字体大小 font_size = 20 # 创建一个窗口 screen = pyga

  • C语言实现代码雨效果

    C语言实现代码雨效果

    本文实例为大家分享了C语言实现代码雨效果的具体代码,供大家参考,具体内容如下 一.项目描述和最终的效果展示 项目:   让字符从上到下依次的下落,呈现出代码雨. 最终效果图如下所示: 二.静态的代码雨 代码如下: #include<graphics.h> #include<time.h> #include<conio.h> #define High 800//游戏画面 #define Width 1000 #define CharSize 25//每个字符显示的大小 i

  • Python实现新年愿望代码雨效果

    目录 1.引言 2.代码实战 2.1 模块介绍 2.2 代码示例 3.总结 1.引言 小丝:鱼哥,2023年了, 你有啥愿望啊? 小鱼:这, 我可以选择不告诉你吗? 小丝:可以选择不告诉我,但是,你自己憋着,不难受吗? 小鱼:… 我可以告诉别人吗? 小丝:… 还有谁能像我,认真听你的愿望. 小鱼:这2023年刚开始,你这是来给我添堵,故意的?? 小丝:既然你不想告诉我,那我也不勉强了,毕竟… 小鱼:你说话,说一半,留一半,不憋得难受吗? 小丝:习惯了, 反正, 我不难受,难受的就是别人! 小鱼:

  • 简单JS打造酷炫代码雨（黑客高逼格）

    电影黑客帝国有个代码雨效果,满满的既视感,身为程序猿的你羡慕吗?只要很简单的HTML+JavaScript就能实现,甚至不需要懂任何技术.这篇文章主要介绍了简单JS打造酷炫代码雨(黑客高逼格),需要的朋友可以参考下 <!doctype html> <html> <head> <meta charset="utf-8" /> <title>流星雨</title> <meta name="keyword

随机推荐