黑客入侵效果网页html,满屏绿字滑下效果

黑客入侵效果网页html代码效果如下图：想要改变绿色的字就把下面代码中的编程ID改成你想要的就行，复制代码粘贴文本文档，改后缀名为html即可。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=devic

编程ID

17454人浏览 · 2021-12-10 22:39:22

编程ID · 2021-12-10 22:39:22 发布

黑客入侵效果网页html代码

效果如下图：
请添加图片描述
想要改变绿色的字就把下面代码中的编程ID改成你想要的就行，复制代码粘贴文本文档，改后缀名为html即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{box-sizing: border-box;}
        body{
            background: #000;
            margin: 0;
            padding: 0;
            overflow: hidden;
            text-shadow: 0px 0px 80px;
        }
        h1{
            margin: 0;
            padding: 0;
            color: #0ff;
        }
        a{color: #fff;}
        /* 盒子↓ */
        p{
            margin: 0;
        }
        .box{
            /* 盒子宽度↓ ---最好别改*/
            width: 700px;
            /* 让视频居中对齐↓---最好别动 */
            text-align: center;
            /* border: 1px solid #f00; */
            color: #fff;
            
            position: absolute;
            margin: 20px auto 0;
            top: 20px;
            left: 0;
            right: 0;
        }
        /* 图片样式↓ */

        img{
            /* 视频宽度↓ ---最好不要大于上面盒子的宽度*/
            width: 700px;
            height: 390px;
            /* 灰色的描边↓ ---px是粗细 solid是实线 #555是颜色代码 可以百度html颜色代码修改*/
            border: 2px solid #222;
            /* 图片的圆角 */
            border-radius: 5px;
            /* 动画时间 */
            transition: 0.8s;
        }
        .img2:hover{border: 2px solid #980b18}

        .box>div{
            padding: 20px;
            /* border: 1px solid #f00; */
        }
        .szj{
            position: absolute;
            top: 0;
            left: 0;
            color: #fff;
            padding: 5px;
            border: 1px solid #eee;
            background-color: rgb(0,0,0,0.7)
        }
        .yl{
            display: inline;
            border-bottom:1px dotted #0ff;
        }
        .yl a{
            text-decoration: none;
            color:#c6d491;
            
        }
        .yl span{
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
   
            <h1></h1>

            <br>

    <!-- 音乐部分 -->
    <embed height="0" width="0" src="https://m.ximalaya.com/sound/477877435"></embed>

    <!-- 以下js -->

    <script>
    var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');


		canvas.height = window.innerHeight;
		canvas.width = window.innerWidth;
        // 下面的雷军就是代码雨的文字
		var texts = '编程ID'.split('');

		var fontSize = 16;
		var columns = canvas.width/fontSize;
		// 用于计算输出文字时坐标，所以长度即为列数
		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, canvas.width, canvas.height);
			//文字颜色
			ctx.fillStyle = '#0F0';
			ctx.font = fontSize + 'px arial';
			//逐行输出文字
			for(var i = 0; i < drops.length; i++){
				var text = texts[Math.floor(Math.random()*texts.length)];
				ctx.fillText(text, i*fontSize, drops[i]*fontSize);

				if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
					drops[i] = 0;
				}

				drops[i]++;
			}
		}
	setInterval(draw, 33);
</script>
</body>
</html>