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

最新推荐文章于 2022-10-23 10:27:16 发布
最新推荐文章于 2022-10-23 10:27:16 发布
阅读量2k 收藏 21
点赞数 33
CC 4.0 BY-SA版权
分类专栏： H5+CSS网页特效实战 文章标签： css 动画 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39709134/article/details/120207166

 🍅 作者主页：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>

上面的其他文件需要引入

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~！

打卡 文章 更新 44  /  100天

精彩推荐更新中：

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

html5 css3酷炫HUD科幻数据屏幕动画界面特效(echarts大屏可视化)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
08-26 3538
html5 css3酷炫HUD科幻数据屏幕动画界面特效(echarts大屏可视化) 作品介绍 1.网页作品简介方面 ： HUD科幻数据屏，采用CSS3，可采用局部刷新来数据同步更新。画图太累，就用透明图片来做，分辨率采用的是1920X1080来制作，使用了一个视频作为全屏背景。 2.网页作品编辑方面：作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用） 文章目录html5 css3酷炫HUD科幻数据屏幕
CSS3制作3D旋转科幻球体动画特效
06-11
这是一款纯CSS3制作3D旋转科幻球体动画特效，CSS3科技球体旋转动画代码。
带科幻风格的纯CSS3用户登录界面设计
12-13
这是一款带有科幻风格的纯CSS3用户登录界面设计效果。它模拟科幻电影《钢铁侠》中斯塔克工业超级电脑的登录界面。该登录界面略带金属质感，通过一条无限运动的弧线绕圆动画来制作一些神秘科技色彩。
HTML+CSS+JS实现 ❤️ 科技感的数字时钟特效❤️
java李阳勇的博客
09-03 2039
代码目录： 主要代码实现： css样式: @charset "utf-8"; @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono"); html, body { height: 100%; } body { background: #0f3854; background: radial-gradient(ellipse at center, #0a2e38 0%, ...
css3 漂浮效果（科幻）
MAYA_G的博客
01-04 1086
效果图 html <div class="float" style="background: url(./bg.png) no-repeat left bottom;background-size: cover;height: 80%;width: 100%;margin-top: 10%;"> <p style="position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);color: #fff;
html+css+js酷炫全屏的后台登录注册界面模板
最新发布
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
HTML+CSS+JS数据可视化大屏平台模板实例21-大数据可视化通用模板
03-25
HTML+CSS+JS数据可视化大屏平台模板实例21是一个专为大数据可视化设计的通用模板，它结合了三种核心技术：HTML、CSS和JavaScript，来创建交互式且具有吸引力的数据展示界面。这种模板对于数据分析、监控和决策支持...
HUD科幻数据屏幕动画界面特效特效代码
03-20
【HUD科幻数据屏幕动画界面特效特效代码】是一个利用现代Web技术，如CSS3和ajax，设计和实现的创新性UI元素。这个特效主要用于创建一种未来感十足的数据展示屏幕，常见于科幻电影或高科技设备的用户界面。HUD，全称...
科幻后台登录界面html模板.zip
07-23
科幻后台登录界面html模板，蓝色科技风格后台登录框,科幻的网站后台系统登录界面模板。django后台登陆页面
JS+CSS3绘制数字科技脸元素图形特效
06-11
JS+CSS3形状外部shape-outside属性绘制数字科技脸元素图形特效，点击页面随机生成很具科技感的人脸图形。
html5 canvas实现的酷炫页面预加载动画图标效果特效代码
03-20
这是一款基于html5 canvas实现的酷炫页面预加载动画图标效果源码。有多种预加载动画效果可供选择，动画渐变效果平滑自然，是一款经典的html5加载动画。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本源码。
科幻游戏界面UI素材
02-02
科幻游戏界面UI素材，eps矢量图UI素材，圆形装饰类素材为主
100套大数据可视化炫酷大屏Html5模板
05-11
100套大数据可视化炫酷大屏Html5模板
css 背景图片滤镜,使用CSS3变换、滤镜和背景图片构造的科幻虫洞
weixin_39623750的博客
08-04 325
CSS语言：CSSSCSS确定body {background-color: #1e0059;height: 100vh;margin: 0;overflow: hidden;-webkit-perspective: 5em;perspective: 5em;}body::after {background-color: inherit;border-radius: 50%;box-shadow:...
暗色科幻风格HTML登录页面css3+html5模板
ICode联盟
10-23 764
暗色科幻风格HTML登录页面模板，带动态效果的很酷的登录页代码。
HTML5超科幻个人主页
陈鹏万里
02-20 8927
在线演示地址：http://me.cpwl.site 备用地址：http://cpwl.sinaapp.com 部分截图： 视频演示：http://www.iqiyi.com/w_19rtceudmh.html 视频下载：http://pan.baidu.com/s/1dDY7oCL 此页面是博主早在之前就做了的（对HTML5比较着迷的时候），现在分享出来
html5加css预加载进度条动画,3种炫酷纯CSS3预加载动画特效
weixin_42398386的博客
06-07 594
这是一组使用纯CSS3制作的预加载动画特效。这组CSS3预加载动画特效共有3种动画效果，分别是翻书效果，摇晃动画和旋转动画。使用方法这组特效使用bootstrap网格系统来进行布局，使用时在页面中引入bootstrap文件。HTML结构以第一种翻书预加载动画效果为例，它的HMTL结构如下：CSS样式为loader添加下面的CSS样式，翻书动画通过CSS3 animation动画来实现。.loade...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
weixin_29465407的博客
06-04 978
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效。这组loading动画共有27种不同的效果。每一种loading动画都是通过CSS3的keyframes帧动画来完成的，每一个加载动画都构思新颖，效果非常的酷。安装可以通过bower来按钮这个loading动画特效：bower install loaders.css使用方法使用这个loading加载动画特效的时候，建议将效果中所需要的H...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

java李杨勇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值