HTML+CSS+JavaScript程序员自制导航搜索页面，炫酷黑客帝国特效源代码，如果你觉得你的搜索页面太乱可以看看这篇文章

本文链接：https://blog.csdn.net/qq_44757034/article/details/119816993
现在的搜索页面广告太多，内容少，不够全面
在这里插入图片描述
你可以在我的代码的基础上进行拓展
下面是源代码同时：这是下载地址：
https://download.csdn.net/download/qq_44757034/21379714
<!DOCTYPE html>
<html>
  
<head> 
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>搜索页面</title>
 <style type="text/css">
  html, body {
   width: 100%;
   height: 100%;
  }
  body {
   background: #000;
   overflow: hidden;
   margin: 0;
   padding: 0;
  }
  *{
  	font-size: 20px;
  }
  
  input{
  	outline:none; 
  	border: #000000;
  }
  select{
  	outline:none; 
  	border: #000000;
  }
  a{
  	text-decoration:none;
  }
 </style>
 <script>
 	
 	
 	function chang(){
 		
 		var http = document.getElementById("key").value;
 		
 		var baidu = "https://www.baidu.com/s";
 		var sogou = "https://www.sogou.com/web";
 		var w360 = "https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome";
 		var bing = "https://cn.bing.com/search";
 		var CSDN = "https://so.csdn.net/so/search";
 		
 		if(http == "百度"){
 			document.getElementById("action").action=baidu;
 			document.getElementById("name").name="wd";
 		}
 		if(http == "搜狗"){
 			document.getElementById("action").action=sogou;
 			document.getElementById("name").name="query";
 		}
 		if(http == "360"){
 			document.getElementById("action").action=w360;
 			document.getElementById("name").name="q";
 		}
 		if(http == "必应"){
 			document.getElementById("action").action=bing;
 			document.getElementById("name").name="q";
 		}
 		if(http == "CSDN"){
 			document.getElementById("action").action=CSDN;
 			document.getElementById("name").name="q";
 		}
 		
 		
 	}
 	
 	
 </script>
 
</head>
  
<body> 
<canvas id="cvs" style="z-index: -5; position: absolute;top: 0px;"></canvas>
	<form id="action" action="https://www.baidu.com/s" method="get" target="_blank">
	<div style="height: 60px; width: 800px;margin: auto;margin-top: 150px;background-color: #000000;color: white;opacity:0.7;border-style: solid;border-color: wheat;border-radius: 15px;border-width: 2px;">
		
		<div style="float: left;margin-left: 10px;">
			<select name="key" id="key" onchange="chang()"  style="height:60px ;padding-left: 45px; text-align:center;width: 150px;background-color: #000000;color: white;opacity:0.7;">
				
				<option value="百度">百度</option>
				<option value="搜狗">搜狗</option>
				<option value="360">360</option>
				<option value="必应">必应</option>
				<option value="CSDN">CSDN</option>
				
			</select>
			
		</div>
		<div style="float: left;">
			<input id="name" name="wd"  style="height:59px;width: 500px;background-color: #000000;color: white;opacity:0.5;" type="text" />
		</div>
		<div>
			
			<input style="height:60px ;width: 100px;background-color: #000000;color: white;" type="submit" value="搜索" />
			
		</div>
		
	</div>
	<div>
		
		<div style="margin: auto; height: 500px; width: 750px;margin-top: 50px;">
			
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;">
				<a target="_blank" href="https://www.baidu.com/" >
					<img height="70"   src="img/baidu.png" />
				</a>
			</div>
			<div style="float: left; height: 80px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 20px;margin-left: 10px;">
				<a target="_blank" href="https://www.sogou.com/" >
					<img height="60" width="190"  src="img/sogou.png" />
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://www.so.com/" >
					<span style="font-size: 25px;color:  forestgreen; line-height: 100px;">360搜索</span>
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://cn.bing.com/" >
					<span style="font-size: 25px;color:  darkcyan ; line-height: 100px;">bing搜索</span>
				</a>
			</div>
			
			<div style="clear: both;margin-top: 20px;">
				
				<div style="height: 50px;"></div>
				
			</div>
			<div style="float: left; height: 95px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 5px;">
				<a target="_blank" href="https://www.google.com/" >
					<img height="80" width="160" style="margin-top: 5px;border-radius: 15px;"  src="img/google.png" />
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				
				<a target="_blank" href="https://www.bilibili.com/" >
					<img height="80" width="160"  style="margin-top: 10px;border-radius: 15px;"  src="img/bilibili.PNG" />
				</a>
			</div>
			
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://www.csdn.net/" >
					<span style="font-size: 35px;color:   red; line-height: 100px;">CSDN</span>
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://www.runoob.com/" >
					<span style="font-size: 25px;color: greenyellow ; line-height: 100px;">菜鸟教程</span>
				</a>
			</div>
			<div style="clear: both;margin-top: 20px;">
				
				<div style="height: 50px;"></div>
				
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;">
				<a target="_blank" href="https://pan.baidu.com/" >
					<span style="font-size: 30px; font-weight: 800;  color: cornflowerblue ; line-height: 100px;">百度网盘</span>
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;padding-top: 0px;margin-left: 10px;">
				<a target="_blank" href="https://www.dashengpan.com/#/" >
					<span style="font-size: 30px; font-weight: 800;  color:  darkorange ; line-height: 100px;">大圣盘</span>
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://www.w3cschool.cn/" >
					<span style="font-size: 35px;color:  darkorange; line-height: 100px;font-weight: 800;">W3C
					<span style="color:   #000000; font-size: 20px;font-weight: 800;">School</span>
					</span>
				</a>
			</div>
			<div style="float: left; height: 100px; width: 180px; background-color: darkgray;border-radius: 15px;text-align: center;margin-left: 10px;">
				<a target="_blank" href="https://www.baidu.com/" >
					<span style="font-size: 25px;color: greenyellow ; line-height: 100px;">菜鸟教程</span>
				</a>
			</div>
		</div>
		
		
		
	</div>
	

</form>


<script type="text/javascript">
	 var cvs = document.getElementById("cvs");
	 var ctx = cvs.getContext("2d");
	 var cw = cvs.width = document.body.clientWidth;
	 var ch = cvs.height = document.body.clientHeight;
	 //动画绘制对象
	 var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
	 var codeRainArr = []; //代码雨数组
	 var cols = parseInt(cw / 20); //代码雨列数
	 var step = 20;  //步长，每一列内部数字之间的上下间隔
	 ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑
	 
	 function createColorCv() {
	  //画布基本颜色
	  ctx.fillStyle = "#000000";
	  ctx.fillRect(0, 0, cw, ch);
	 }
	 
	 //创建代码雨
	 function createCodeRain() {
	  for (var n = 0; n < cols; n++) {
	   var col = [];
	   //基础位置，为了列与列之间产生错位
	   var basePos = parseInt(Math.random() * 300);
	   //随机速度 3~13之间
	   var speed = parseInt(Math.random() * 10) + 3;
	   //每组的x轴位置随机产生
	   var colx = parseInt(Math.random() * cw)
	 
	   //绿色随机
	   var rgbr = 0;
	   var rgbg = parseInt(Math.random() * 255);
	   var rgbb = 0;
	   //ctx.fillStyle = "rgb("+r+','+g+','+b+")"
	 
	   for (var i = 0; i < parseInt(ch / step) / 2; i++) {
	    var code = {
	     x: colx,
	     y: -(step * i) - basePos,
	     speed: speed,
	     // text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //随机生成0或者1
	     text: ["0","1","a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
	     color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
	    }
	    col.push(code);
	   }
	   codeRainArr.push(col);
	  }
	 }
	 
	 //代码雨下起来
	 function codeRaining() {
	  //把画布擦干净
	  ctx.clearRect(0, 0, cw, ch);
	  //创建有颜色的画布
	  //createColorCv();
	  for (var n = 0; n < codeRainArr.length; n++) {
	   //取出列
	   col = codeRainArr[n];
	   //遍历列，画出该列的代码
	   for (var i = 0; i < col.length; i++) {
	    var code = col[i];
	    if (code.y > ch) {
	     //如果超出下边界则重置到顶部
	     code.y = 0;
	    } else {
	     //匀速降落
	     code.y += code.speed;
	    }
	    
	    //1 颜色也随机变化
	   // ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)"; 
	 
	    //2 绿色逐渐变浅
	   ctx.fillStyle = "hsl(215,80%,"+(30-i*2)+"%)"; 
	 
	    //3 绿色随机
	   // var r= 0;
	  //  var g= parseInt(Math.random()*255) + 3;
	   // var b= 0;
	   // ctx.fillStyle = "rgb("+r+','+g+','+b+")";
	 
	    //4 一致绿
	    //ctx.fillStyle = code.color;
	 
	 
	    //把代码画出来
	    ctx.fillText(code.text, code.x, code.y);
	   }
	  }
	  requestAnimationFrame(codeRaining);
	 }
	 
	 //创建代码雨
	 createCodeRain();
	 //开始下雨吧 GO>>
	 requestAnimationFrame(codeRaining);
</script>
  
</body>
</html>