當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 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"><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><div class="m-4"></div><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-a"><div class="m-15-k"><div class="m-15xz1"><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>      </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>

上面的其他文件需要引入

源碼獲取

大家可以點贊、收藏、關注、評論我啦、查看博主主頁或下方微信公眾號獲取~！

打卡文章更新?44??/? 100天

精彩推薦更新中：

HTML5大作業實戰案例《100套》

Java畢設項目精品實戰案例《100套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机系统军训口号,霸气的军训口号大全
下一篇： HTML+CSS+JS实现 ❤️ 粒子倒