欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2024/8/1 编程问答 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 黑客入侵效果网页html,满屏绿字滑下效果 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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

喜欢的点个赞再走呗！

总结

以上是生活随笔为你收集整理的黑客入侵效果网页html,满屏绿字滑下效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。