當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2025/3/12 HTML 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️酷炫HUD科幻数据屏幕动画界面❤️ 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

?🍅 作者主頁：Java李楊勇?

🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、Java李楊勇公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼?

代碼目錄：

主要代碼實(shí)現(xiàn)：

CSS樣式：

.box {position: fixed;/*絕對(duì)定位*/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;/*相對(duì)定位參照物*/ }.box-a .m-1 {width: 500px;height: 298px;position: absolute;/*絕對(duì)定位*/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;/*絕對(duì)定位*/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;/*絕對(duì)定位*/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;/*絕對(duì)定位*/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科幻數(shù)據(jù)屏</title><meta name="Description" content="HUD科幻數(shù)據(jù)屏，采用CSS3+ajax制作，可采用局部刷新來數(shù)據(jù)同步更新。畫圖太累，就用透明圖片來做，分辨率采用的是1920X1080來制作，使用了一個(gè)視頻作為全屏背景。" /><meta name="Keywords" content="大數(shù)據(jù)屏幕,HUD科幻屏幕,科幻類數(shù)據(jù)顯示器" /><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>人間島工作站數(shù)據(jù)屏</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>//創(chuàng)建XMLHttpRequest對(duì)象</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>//發(fā)送請(qǐng)求函數(shù)</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;//指定響應(yīng)函數(shù)</div><div>XMLHttpReq.send(null); // 發(fā)送請(qǐng)求 </div><div>} </div><div>// 處理返回信息函數(shù)</div><div>function processResponse() { </div><div>if (XMLHttpReq.readyState == 4) { // 判斷對(duì)象狀態(tài)</div><div>if (XMLHttpReq.status == 200) { // 信息已經(jīng)成功返回，開始處理</div>信息<div>DisplayHot(); </div><div>setTimeout("sendRequest()",2000); //設(shè)置自動(dòng)刷新時(shí)間，這里是毫秒，即2秒//RemoveRow();</div><div>} else { //頁面不正常 </div><div>//window.alert("您所請(qǐng)求的頁面有異常。"); </div><div>} </div><div>} </div><div>} </div><div>function DisplayHot()</div><div>{</div><div>var theDate = XMLHttpReq.responseText ;//如果出現(xiàn)編碼問題,可以在服務(wù)端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">進(jìn)行中訂單</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>

上面的其他文件需要引入

源碼獲取

大家可以點(diǎn)贊、收藏、關(guān)注、評(píng)論我啦、查看博主主頁或下方微信公眾號(hào)獲取~！

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

精彩推薦更新中：

HTML5大作業(yè)實(shí)戰(zhàn)案例《100套》

Java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：计算机系统军训口号,霸气的军训口号大全
下一篇： 2021计算机专业考408的学校,202