黑客数字雨网页代码及特效展示
今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效，今日转载给网友欣赏！先上黑客数字雨的网页特效给大家看看吧！网址是：https://www.olzz.com/demo
今天站长在线无意中在网络上面发现了一个黑客数字雨的网页特效，今日转载给网友欣赏！
先上 黑客数字雨的网页特效给大家看看吧！网址是：
https://www.olzz.com/demo/hkszy.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>黑客数字雨_站长在线网页特效演示</title>
<style>
body {
margin: 0;
padding: 0;
}
.bind {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
top: 50%;
left: 50%;
transition: all 1s ease 0s;
}
.icon {
cursor: pointer;
opacity: 0.9;
animation: move 2s linear infinite;
}
@keyframes move {
0% {
transform: scale(0.5, 0.5);
}
100% {
transform: scale(1, 1);
}
}
canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="bind" onclick="start()">
<svg id="icon" t="1633583358049" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2404" width="200" height="200">
<PATH
d="M329.4 460.5c10-2.3 16.3-12.2 14.1-22.3-4.7-21.1-5.5-42.7-2.1-64.3 14.6-94.2 103.1-159.1 197.4-144.5 22.2 3.4 43.2 11 62.3 22.4 8.9 5.3 20.3 2.4 25.5-6.4 5.3-8.8 2.4-20.3-6.4-25.6-23.3-13.9-48.7-23.1-75.7-27.3-114.5-17.7-222.2 61-239.9 175.6-4 26.2-3.2 52.5 2.6 78.2 1.9 8.7 9.6 14.6 18.2 14.6 1.3 0.1 2.7-0.1 4-0.4z"
fill="#1afa29" p-id="2405"></path>
<path
d="M847.9 599.4c0-26.6-10.5-50.1-28-66.4 17.6-40.7 27.5-85.5 27.5-132.7 0-184.8-150.3-335.1-335.1-335.1S177.2 215.5 177.2 400.3c0 110.7 54.1 208.8 137 269.9 0.6 3.3 1.3 6.6 2.3 9.9 3.2 10.8 7.5 20.4 13 28.8 30.1 45.8 64.1 97.7 97.9 148.3 34.2 51.2 83.8 83.1 147.2 94.7 8 1.4 15.3 2.4 22.3 3.3 3.4 0.5 6.8 0.9 10.2 1.4 2.7 0.4 5.3 0.6 8 0.6h37.8c3 0 6-0.2 8.9-0.7 3.3-0.5 6.7-1.1 10-1.6 5.7-0.9 11.5-1.8 17.2-2.8 80.2-13.8 140.7-74.1 154.3-153.7 2.8-15.9 4.2-32 4.3-47.7 0.2-59.7 0.2-67.2 0.2-91.4 0.1-12.3 0.1-29.1 0.1-59.9z m-614.8-199c0-154.2 125-279.2 279.3-279.2 154.2 0 279.2 125 279.2 279.2 0 39.1-8.2 76.3-22.7 110.1-2.6-0.2-5.2-0.4-7.9-0.4-8.1 0-16 1.1-23.5 3.2-8.7-8.2-19.1-14.7-30.8-18.7-1.9-0.6-3.9-1.2-5.8-1.7 9.2-18.6 15.9-38.8 19.2-60.4 7.2-46.4-1-92.7-23.7-133.7-5-9-16.3-12.3-25.3-7.3-9 5-12.3 16.3-7.3 25.3 18.7 33.8 25.4 71.8 19.5 110-3.7 24.1-12.4 46.2-24.7 65.5-1.1 0.3-2.3 0.4-3.3 0.7-7.7-7-16.9-12.8-27.4-17.3-8-4.2-17-6.5-26.2-6.5h-1.9v-65c0-45.4-30.1-80.6-75-87.7-4.2-0.7-8.4-1-12.5-1-43.9 0-82.4 35.3-85.9 78.6-0.4 5.6-0.4 10.2-0.4 14V550c-17.4-10-33.1-22.9-46.2-38.6-6.6-7.9-18.3-8.9-26.2-2.3-7.9 6.6-8.9 18.3-2.3 26.2 9.1 10.9 19.3 20.6 30.2 29.3-22.6 5.8-42.5 20.2-54.8 40.5-0.5 0.8-0.8 1.6-1.3 2.4-56.8-51.1-92.3-125-92.3-207.1z m558.8 350.2c0 12.8-1.3 25.9-3.5 38.6-9.6 56.2-52.1 98.3-108.5 108-8.9 1.5-17.8 2.8-26.8 4.3h-37.8c-10.1-1.5-20.4-2.6-30.5-4.4-46.5-8.5-84.3-31-110.8-70.7-32.8-49.2-65.3-98.5-97.7-147.9-2.7-4.2-4.7-9-6.1-13.8-6.1-20.9 6.2-42.4 26.8-46.4 3-0.6 5.9-0.9 8.6-0.9 12.5 0 23.1 5.6 31.3 16.2 13.6 17.6 26.4 35.7 39.6 53.6l4.2 5.7c0.3-0.2 0.7-0.3 1.1-0.4v-5-279.2c0-3.2 0-6.3 0.2-9.5 1.2-14.7 15.6-27.2 30.2-27.2 1.3 0 2.6 0.1 3.9 0.3 17.4 2.7 27.8 14.8 27.8 32.5 0 49.7 0 132.9 0.1 182.6 0 2.6 0.2 5.3 0.9 7.7 1.3 4 4.3 6.2 8.6 6.5h0.9c4.1 0 7.2-2.1 8.8-5.7 1-2.3 1.1-5.1 1.1-7.7v-22.5-6.6c0-11.2 3.8-21 13.3-27.6 3.5-2.4 7.7-3.9 11.6-5.8h12.6c0.5 0.3 0.8 0.7 1.3 0.9 16.3 5.6 23.9 16.2 23.9 33.4v22.2-16.4 22.2c0 1.6-0.1 3.2 0.1 4.7 0.7 5.4 4.8 8.9 10 8.9h1c5.5-0.5 8.7-4.2 9-11.1v-0.2-1.2-10.6c0.2-7.3 2-14.2 6.7-20.2 6.2-7.8 15.2-12.1 24.6-12.1 3.4 0 6.9 0.6 10.2 1.7 12.9 4.4 21.2 17 21.2 31.9v28c0 1.9 0 3.9 0.2 5.8 0.6 5.1 3.9 7.7 8.6 8.6 0.5 0.1 1 0.1 1.5 0.1 3.7 0 7.7-2.6 8.9-6.3 0.8-2.4 1-5.1 1-7.7V602v11.3s0.1-3.4 0.1-13.2c0-5.4 1-11.3 3.2-16.3 4.7-11.1 16-17.8 27.7-17.8 2.2 0 4.3 0.2 6.4 0.7 15.1 3.3 24.6 16.1 24.6 32.7 0 90.3 0.1 60.8-0.1 151.2z"
fill="#1afa29" p-id="2406"></path>
</svg>
</div>
<canvas id="canvas" ></canvas>
<script>
//获取画布对象
var can = document.querySelector("canvas");
//获取画布的上下文
var ctx = can.getContext("2d");
//设置canvas的宽度和高度
can.width = window.innerWidth;
can.height = window.innerHeight;
console.log(can.width)
//每个文字的字体大小
var fontSize = 16;
//计算列
var colunms = Math.floor(window.innerWidth / fontSize);
//记录每列文字的y轴坐标
var arr = [];
//给每一个文字初始化一个起始点的位置
for (var i = 0; i < colunms; i++) {
arr.push(0);
}
//运动的文字
var str = "01";
function start() {
console.log('start')
document.getElementById("canvas").style.display = "";//显示
var elem = document.getElementById("canvas");
requestFullScreen(elem); // 某个页面元素
}
var times;
//全屏功能
function requestFullScreen(element) {
draw()
// 流动速度
times = setInterval(() => {
draw()
}, 30);
// 判断各种浏览器，找到正确的方法
var requestMethod = element.requestFullScreen || //w3c
element.webkitRequestFullScreen || //FireFox
element.mozRequestFullScreen || //Chrome等
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXobject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.Sendkeys("{F11}");
}
}
}
//退出全屏 判断浏览器种类
function exitFull() {
// 判断各种浏览器，找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//监听退出全屏事件
window.onresize = function () {
if (checkFull()) {
clearInterval(times);
document.getElementById("canvas").style.display = "none";//显示
}
}
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if (isFull === undefined) { isFull = false; }
return isFull;
}
//绘画的函数
function draw() {
//布满全屏的黑色遮罩层
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);
//给字体设置样式
ctx.font = "700 " + fontSize + "px 微软雅黑";
//给字体添加颜色
ctx.fillStyle = "#00cc33";
//写入画布中
for (var i = 0; i < colunms; i++) {
var index = Math.floor(Math.random() * str.length);
var x = i * fontSize;
var y = arr[i] * fontSize;
ctx.fillText(str[index], x, y);
//如果文字的Y轴坐标大于画布的高度，1/100*colunms概率将该文字的Y轴坐标重置为0
if (y >= can.height && Math.random() > 0.99) {
arr[i] = 0;
}
//文字Y轴坐标+1
arr[i]++;
}
}
</script>
</body>
</html>
本文地址：https://www.olzz.com/hkszy.html
码字不易，打个赏呗
杨泽业感谢你的支持！
站长在线站长一对一网络指导服务，一元一分钟，50元一个小时
阿里云虚拟主机1G空间，120元一年
香港、美国虚拟主机100元一年，1000元永久
腾讯云双十一0.4折起，2核8G5M三年仅700元，2核4G8M三年仅198元
阿里云虚拟主机1G空间，120元一年
香港、美国虚拟主机100元一年，1000元永久
腾讯云双十一0.4折起，2核8G5M三年仅700元，2核4G8M三年仅198元
猜你喜欢