2024年黑客入侵效果网页html,满屏绿字滑下效果_装黑客绿色刷屏代码(1)

最新推荐文章于 2024-08-31 16:53:31 发布

2401_84254530

最新推荐文章于 2024-08-31 16:53:31 发布

阅读量725

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/2401_84254530/article/details/138428222

版权

黑客入侵效果网页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;


## 写在最后

**在结束之际，我想重申的是，学习并非如攀登险峻高峰，而是如滴水穿石般的持久累积。尤其当我们步入工作岗位之后，持之以恒的学习变得愈发不易，如同在茫茫大海中独自划舟，稍有松懈便可能被巨浪吞噬。然而，对于我们程序员而言，学习是生存之本，是我们在激烈市场竞争中立于不败之地的关键。一旦停止学习，我们便如同逆水行舟，不进则退，终将被时代的洪流所淘汰。因此，不断汲取新知识，不仅是对自己的提升，更是对自己的一份珍贵投资。让我们不断磨砺自己，与时代共同进步，书写属于我们的辉煌篇章。**


需要完整版PDF学习资源私我



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**