HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

.box {position: fixed;/*绝对定位*/width: 1290;/*1920*/height: 1080px;margin: 0 auto 0 auto;top: 0px;background: rgba(24, 38, 41, 0.1);background: url(../images/bj.png);padding: 20px;
}.box-a {width: 1920px;height: 1080px;position: relative;/*相对定位 参照物*/
}.box-a .m-1 {width: 500px;height: 298px;position: absolute;/*绝对定位*/top: 0px;left: 0px;border: 2px solid #015c79;/*background: rgba(1,92,121, 0.5);*/background: url(../images/a-bj-1.jpg)repeat fixed center;filter: alpha(opacity=50);/*支持 IE 浏览器*/-moz-opacity: 0.50;/*支持 FireFox 浏览器*/opacity: 0.50;/*支持 Chrome, Opera, Safari 等浏览器*/z-index: 1;
}.box-a .m-2 {width: 500px;height: 500px;position: absolute;/*绝对定位*/top: 200px;left: 600px;background: no-repeat url("../images/gif-6-1.png") left top;border: 2px solid #;background-color: ;z-index: 2;
}.box-a .m-3 {overflow: hidden;width: 18px;height: 270px;padding: 8px;position: absolute;/*绝对定位*/top: 10px;left: 500px;
}.box-a .m-3 #m-3-id-1 p {height: 20px;line-height: 14px;margin: 0;font: 24px/18px 'bankgothic_md_btmedium';color: #0caff4;text-align: center;
}.box-a .m-4 {width: 500px;height: 300px;background: url(../images/gif-1.gif);position: absolute;/*绝对定位*/top: 0px;left: 2px;z-index: 4;filter: alpha(opacity=70);/*支持 IE 浏览器*/-moz-opacity: 0.70;/*支持 FireFox 浏览器*/opacity: 0.70;/*支持 Chrome, Opera, Safari 等浏览器*/
}

HTML代码 :

<!DOCTYPE HTML>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HUD科幻数据屏</title><meta name="Description" content="HUD科幻数据屏，采用CSS3+ajax制作，可采用局部刷新来数据同步更新。画图太累，就用透明图片来做，分辨率采用的是1920X1080来制作，使用了一个视频作为全屏背景。" /><meta name="Keywords" content="大数据屏幕,HUD科幻屏幕,科幻类数据显示器" /><link href="css/style-rj.css" rel="stylesheet" type="text/css" /><link href="css/style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head><body onLoad="sendRequest()"><div class="videozz"></div><video autoplay muted loop poster="media/fallba1ck.jpg"><!--autoplay 自动播放视频 muted静音 loop循环--><source src="http://www.kadai123.com/images/mov.mp4"><source src="media/video.webm">你的游览器不支持video支持</video><!--主--><div class="box"><div class="box-a"><div class="m-1"></div><!--中间主圈--><div class="m-2"></div><!--中间主圈--><!--标题--><div class="m-3"><div id="m-3-id-1"><!--滚动区域--><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p>D</p><p>A</p><p>T</p><p>A</p><p></p><p>S</p><p>T</p><p>A</p><p>T</p><p>I</p><p>S</p><p>T</p><p>I</p><p>C</p><p>S</p><!--滚动区域--></div></div><!--标题--><!--声波1--><div class="m-4"></div><!--声波2--><div class="m-5"><div id="m-5-id-1"><div id="m-5-2"><div id="m-5-id-2"><a href="#"><img src="images/gif-2.png" border="0" /></a></div><div id="m-5-id-3"></div></div></div></div><div class="m-10"></div><!--字体翻转--><div class="m-6"><div class="masked"><h4>人间岛工作站数据屏</h4></div></div><!--小图片旋转--><div class="m-xz7"></div><div class="m-xz8 xzleft"></div><div class="m-xz9"></div><div class="m-x10"></div><div class="m-x11"></div><div class="m-x12 xzleft"></div><div class="m-x13"></div><div class="m-x14 xzleft"></div><div class="m-x15"></div><div class="m-x16 xzleft"></div><div class="m-x17 xzleft"></div><div class="m-x18"></div><div class="m-x19 xzleft"></div><div class="m-x20"></div><!--小图片旋转--><div class="m-7"><div class="m-7-k"><div class="m-7xz1 xzleft"></div><div class="m-7xz2"></div><div class="m-7xz3 xzleft"></div><div class="m-7zt1">今天收入额</div><div class="m-7zt2" id="sx1">2.768</div></div></div><div class="fbl">Resolution:1920 X 1080</div><div class="m-8"></div><div class="m-9"><div class="masked1" id="sx8">2.684.156</div></div><div class="m-11"><div class="m-k-1"><div class="t1"></div></div><div class="m-k-2"><div class="t2"></div></div><div class="m-k-3"><div class="t3"></div></div><div class="m-k-4"><div class="t4"></div></div><div class="m-k-5"><div class="t5"></div></div><div class="m-k-6"><div class="t6"></div></div><div class="m-k-7"><div class="t7"></div></div></div><div class="m-12"><div class="m-12-k"><div class="m-12xz1 xzleft"></div><div class="m-12xz2"></div><div class="m-12xz3 xzleft"></div><div class="m-12zt1">今天支出额</div><div class="m-12zt2" id="sx2">452</div></div></div><div class="m-13" id="screen1"><div class="" id="screen1_1"><div>var XMLHttpReq; </div><div>//创建XMLHttpRequest对象</div><div>function createXMLHttpRequest() { </div><div>if(window.XMLHttpRequest) { //Mozilla 浏览器 </div><div>XMLHttpReq = new XMLHttpRequest(); </div><div>} </div><div>else if (window.ActiveXObject) { // IE浏览器</div><div>try { </div><div>XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); </div><div>} catch (e) { </div><div>try { </div><div>XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); </div><div>} catch (e) {} </div><div>} </div><div>} </div><div>} </div><div>//发送请求函数</div><div>function sendRequest() { </div><div>createXMLHttpRequest(); </div><div>var url = "data1.php?_dc="+new Date().getTime();</div><div>XMLHttpReq.open("GET", url, true); </div><div>XMLHttpReq.onreadystatechange = processResponse;//指定响应函数</div><div>XMLHttpReq.send(null); // 发送请求 </div><div>} </div><div>// 处理返回信息函数</div><div>function processResponse() { </div><div>if (XMLHttpReq.readyState == 4) { // 判断对象状态</div><div>if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理</div>信息<div>DisplayHot(); </div><div>setTimeout("sendRequest()",2000); //设置自动刷新时间，这里是毫秒，即2秒//RemoveRow();</div><div>} else { //页面不正常 </div><div>//window.alert("您所请求的页面有异常。"); </div><div>} </div><div>} </div><div>} </div><div>function DisplayHot()</div><div>{</div><div>var theDate = XMLHttpReq.responseText ;//如果出现编码问题,可以在服务端escape一下,然后在这里使用unescape( responseText )</div><div></div><div>gxsj1.innerHTML = theDate ;</div>}</div><div id="screen1_2"></div></div><div class="m-14"><div class="ss"></div></div><!--地图--><!--<div class="m-15-b">--><div class="m-15-a"><div class="m-15-k"><div class="m-15xz1"><!--<div class="m-15-dd1">--><div class="m-15-dd2"></div></div></div></div><!--地图--><!--圈--><div class="m-16"></div><div class="m-17"></div><div class="m-18 xzleft"></div><div class="m-19"></div><div class="m-20 xzleft"></div><div class="m-21"></div><div class="m-22"></div><div class="m-23 xzleft"></div><!--圈--><!--时间--><div class="m-24" id="localtime"></div><!--时间--><div class="m-25"><div class="m-25k"><div class="m-25xz1 m-25pic1"></div><div class="m-25zt1">全部订单</div><div class="m-25zt2" id="sx4">581</div></div></div><div class="m-26"><div class="m-25k"><div class="m-25xz1 m-25pic2"></div><div class="m-25zt1">未处理订单</div><div class="m-25zt2" id="sx5">8</div></div></div><div class="m-27"><div class="m-25k"><div class="m-25zt1">进行中订单</div><div class="m-25zt2" id="sx6">5</div><div class="m-25xz1 m-25pic3"></div></div></div><div class="m-28"><div class="m-25k"><div class="m-25zt1">成功订单</div><div class="m-25zt2" id="sx7">554</div><div class="m-25xz1 m-25pic4"></div></div></div><div class="m-29"><div class="masked2" id="">Today's Hits:<span id="zdzj1"></span> &nbsp;&nbsp;&nbsp;&nbsp; </div></div><div class="m-30">This page statement: this special effects using CSS3+AJAX production, by the human Island workstation production.</div></div></div><!--主--><script src="js/common.min.js"></script>
</body></html>

上面的其他文件需要引入