大数据可视化动态交互效果-html代码-BFW代码库

代码语言：html
代码描述：大数据可视化动态交互效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
  
    <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/ProgressBarWars.css">
    <style type="text/css">
    
    /*全局控制栏*/body{ background-color: #020712; margin: 0; font-family: "Microsoft YaHei"; font-weight: lighter; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca83190960.png");    background-repeat: no-repeat; background-position: center; background-position-y: -120px;}a{ text-decoration: none; color: white;}.l_left{float: left}.clear{clear: both}img{border: none}/*标题*/.Hometitlebox{ width: 686px; height: 69px; margin: auto; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca8d6dbb2e.png"); background-repeat: no-repeat; background-position: center; text-align: center; font-weight: bold;    font-size: 18px; line-height: 69px;}/*动效栏*/.flasheffectoutbox{ width: 1000px; height: 500px;margin: auto; margin-top: 100px; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca87caf08f.png"); background-repeat: no-repeat; background-position: center;position: relative}.circleeffectclass{ border-radius: 50%; border: rgba(0,168,255,0.6) 1px solid; cursor: pointer; position: absolute;}.effectposition{ position: absolute;}.acrossremindeffectout{ background-color: rgba(0,126,255,0.05); border-radius: 50%;}.acrossremindeffectoutho{ background-color: rgba(0,126,255,0.15);}.acrossremindeffectin{ background-color: rgba(0,126,255,0.3); border-radius: 50%; margin: auto;}.acrossremindeffectinho{ background-color: rgba(0,126,255,0.45);}.stagetitle{color: #00e4ff; top: 104px; font-size: 14px; font-family: "Microsoft YaHei"; font-weight: lighter; display: block;width: 116px; text-align: center; position: absolute;left: -10%;}.stagearoundtitle{left: -25%;top:85px;}.line{position: absolute;transform-origin:left;animation-iteration-count:infinite}.line2{z-index: 1;left: 330px;top: 183px;width: 0;height: 3px;transform: rotate(21deg);animation: mm2 4s ;    animation-delay:2s;animation-iteration-count:infinite;    background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca893cb82e.png");    background-repeat: no-repeat;    background-position: 100%;}.line3{z-index: 1;left: 262px;top: 351px;width: 0;height: 3px;transform: rotate(-25deg);animation: mm 5s ;    animation-delay:4s;animation-iteration-count:infinite;    background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca893cb82e.png");    background-repeat: no-repeat;    background-position: 100%;}.line4{z-index: 1;left: 638px;top: 141px;width: 0;height: 3px;transform: rotate(-211deg);animation: mm4 3s  ;    animation-delay:3s;animation-iteration-count:infinite;    background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca893cb82e.png");    background-repeat: no-repeat;    background-position: 100%;}.line5{z-index: 1;left: 679px;top: 289px;width: 0;height: 3px;transform: rotate(-172deg);animation: mm5 5s  ;animation-delay:1s;    animation-iteration-count:infinite;    background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca893cb82e.png");    background-repeat: no-repeat;    background-position: 100%;}.line6{z-index: 1;left: 537px;top: 373px;width: 0;height: 3px;transform: rotate(-116deg);animation: mm6 4s  ;animation-delay:0s;    animation-iteration-count:infinite;    background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca893cb82e.png");    background-repeat: no-repeat;    background-position: 100%;}@keyframes mm{    0%{width: 0}    100%{width: 194px}}@keyframes mm2{    0%{width: 0}    100%{width: 113px}}@keyframes mm4{    0%{width: 0}    100%{width: 140px}}@keyframes mm5{    0%{width: 0}    100%{width: 158px}}@keyframes mm6{    0%{width: 0}    100%{width: 94px}}/*主动效*/.maineffectoutbox{border: rgba(0,168,255,0.6) 3px solid; width: 94px; height: 94px;top: 194px;left: 430px;}.maindataeffect{ animation: scrolleffect 6.5s infinite linear;}.maindataspecialeffectct{animation: maindataspecialeffect 0.6s forwards;}@keyframes scrolleffect {    0%{transfrom: rotate(0deg);}    25%{transform: rotate(90deg);}    50%{transform: rotate(180deg);}    75%{transform: rotate(270deg);}    100%{transform: rotate(360deg);}}@keyframes maindataspecialeffect {    0%{transform: rotate(0deg);}    100%{transform: rotate(360deg);}}/*卫星动效*/.aroundfunctioneffect{ width: 76px; height: 76px;}.acrossremindeffectoutard{width: 60px; height: 60px; margin: 8px;}.acrossremindeffectinard{width: 54px; height: 54px; margin: 3px;}.arounddataeffect01{ animation: scrolleffectarround01 linear infinite 4s forwards;}.arounddataeffect02{ animation: scrolleffectarround01 linear infinite 3.8s forwards;}.arounddataeffect03{ animation: scrolleffectarround01 linear infinite 4.2s forwards;}@keyframes scrolleffectarround01 {    0%{transfrom: rotate(0deg);}    25%{transform: rotate(-90deg);}    50%{transform: rotate(-180deg);}    75%{transform: rotate(-270deg);}    100%{transform: rotate(-360deg);}}/*修饰卫星*/.decarround01{ width: 37px; height: 37px; cursor: auto;}.decarroundin01{ width: 33px; height: 33px; margin: 2px;background-color: rgba(0,126,255,0.8);}.decarroundin01:hover{ background-color: rgba(0,126,255,0.9);}.decarround02{ width: 27px; height: 27px; cursor: auto;}.decarroundin02{ width: 23px; height: 23px; margin: 2px;background-color: rgba(0,126,255,0.7);}.decarroundin02:hover{ background-color: rgba(0,126,255,0.8);}/*悬浮信息*/.fltoutbox{width: 282px; position: absolute; background-repeat: no-repeat; background-position: center; background-position-y: 0px;}.leftbox{ left: 2%; top: 6%; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca8af0be46.png");}.rightbox{ right: 2%; top: 6%; background-image: url("http://repo.bfw.wiki/bfwrepo/image/5eeca8be3db51.png");}.analyzedatashowtitle{ line-height: 44px; color: #dfdede; font-size: 14px;  margin-left: 16px; display: block;font-weight: bold}.analyzemsgbgbox{ background-color: rgba(0,168,255,0.2); width: 280px; height: 260px; position: relative;}.fltdecarround{width: 8px;height: 8px; position: absolute;}.fltdecarroundtop{ top:-1px; border-top: #00a8ff 3px solid;}.fltdecarroundright{ right:-1px; border-right: #00a8ff 3px solid;}.fltdecarroundbottom{ bottom:-1px; border-bottom: #00a8ff 3px solid;}.fltdecarroundleft{ left:-1px; border-left: #00a8ff 3px solid;}/*弹出信息*/.analyzepopupbox{ width: 1000px;height: 680px; background-color: rgba(0,8,12,0.75);position: fixed; top: 100px; overflow-y: scroll;}.popupboxtitlebox{ height: 30px;width: 1000px; background-color: #64a6d4;  position: fixed;top: 100px;z-index: 100;}.popupboxtitlemsg{font-size: 16px; color: white; font-weight: bold; line-height: 30px; margin-left: 10px;}.popupboxclose{ width: 16px; height: 16px; background-image: url("../img/popupboxclosebtn01.png"); float: right; margin-right: 9px; margin-top: 6px; cursor: pointer;}.popupboxclose:hover{ background-image: url("../img/popupboxclosebtn02.png");}.popupboxmsgoutbox{ height: 314px; width: 980px; margin: auto;border-bottom: #00b6cc 2px solid;}.popupboxmsgboxhlf{ padding-top: 20px; float: left; width: 479px; margin-left: 10px;}.popupboxmsgboxcrs{ padding-top: 20px;}.popupboxmsgtitle{font-size: 14px; font-weight: bold; color: #00e4ff;}.popupboxdata{ color: #fffc00;}.popuofunxtionbox{width: 1000px; margin: auto; position: relative; display: none;}/*版权*/.copyrigntoutbox{position: absolute; bottom: 10px; left: 37%;}.copyrigntmsg{ display: block; color: white; font-size: 12px;}
    

        * {
            padding: 0;
            margin: 0;
        }

        .loadEffect {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            top: 26%;
        }

        .loadEffect span {
            animation: load 1.04s ease infinite;
            display: inline-block;
            width: 30px;
            height: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: lightgreen;
            position: absolute;
        }

        .loadEffect span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -5px;
            animation-delay: 0.13s;
        }

        .loadEffect span:nth-child(2) {
            left: 10px;
            top: 20px;
            transform: rotate(45deg);
            animation-delay: 0.26s;
        }

        .loadEffect span:nth-child(3) {
            left: 50%;
            top: 10px;
            margin-left: -15px;
            transform: rotate(90deg);
            animation-delay: 0.39s;
        }

        .loadEffect span:nth-child(4) {
            top: 20px;
            right: 10px;
            transform: rotate(135deg);
            animation-delay: 0.52s;
        }

        .loadEffect span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -5px;
            transform: rotate(180deg);
            animation-delay: 0.65s;
        }

        .loadEffect span:nth-child(6) {
            right: 10px;
            bottom: 20px;
            transform: rotate(225deg);
            animation-delay: 0.78s;
        }

        .loadEffect span:nth-child(7) {
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
            transform: rotate(270deg);
            animation-delay: 0.91s;
        }

        .loadEffect span:nth-child(8) {
            bottom: 20px;
            left: 10px;
            transform: rotate(315deg);
            animation-delay: 1.04s;
        }

@keyframes load {
            0% {
                opacity: 1;
            }

            100% {
                opacity: 0.2;
            }
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #loading {
            background-color: #181e20;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 999;
        }
    </style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
  <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/ProgressBarWars.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .progress {
            margin-top: 30px;
        }

        .down_span {
            color: #dfdede;
            font-size: 12px;
            font-weight: lighter;
        }

        h3, ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .scrollbox {
            width: 268px;
            margin: 0 auto;
        }

        #scrollDiv {
            width: 268px;
            height: 280px;
            overflow: hidden;
        }

        /*这里的高度和超出隐藏是必须的*/            #scrollDiv ul li {
            height: 66px;
            width: 259px;;
            background-color: #07325e;
            overflow: hidden;
            margin-bottom: 4px;
            color: #dfdede;
            font-size: 14px;
            padding: 0 9px 0 9px;
            line-height: 30px;
            position: relative;
        }

        #scrollDiv ul li span {
            position: absolute;
            bottom: 5px;
            right: 16px;
            display: block;
            width: 68px;
            height: 18px;
            text-align: center;
            color: #081e49;
            background-color: #69c200;
            line-height: 18px;
        }

        .sent-div {
            width: 98%;
            height: 98%;
            margin: 0 auto;
        }
    </style>
    <title>HTML大数据综合分析平台模板</title>
</head>
<body>
    <div id="loading">
        <div class="loadEffect">
            <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
        </div>
    </div>
    <!--标题栏--><div class="Hometitlebox">
        <a style=" color: #00e4ff;" href="Datacages_Homeindex.html">HTML大数据综合分析平台模板</a>
    </div>
    <!--动效显示--><div class="flasheffectoutbox">
        <div style="width: 1000px; height: 500px; position: relative">
            <div class="line2 line"></div>
            <div class="line3 line"></div>
            <div class="line4 line"></div>
            <div class="line5 line"></div>
            <div class="line6 line"></div>
            <!--主动效--><div class="maineffectoutbox circleeffectclass">
                <a href="">
                    
                    <img class="effectposition maindataeffect" src="http://repo.bfw.wiki/bfwrepo/icon/5eecabde96253.png"><div class="effectposition acrossremindeffectout" style=" width: 76px; height: 76px; margin: 9px;">
                    <div class="acrossremindeffectin" style="width: 68px; height: 68px; margin: 4px;"></div>
                </div>
                    <img class="effectposition maindataspecialeffect" src="http://repo.bfw.wiki/bfwrepo/icon/5eecabcf4c4de.png"><img class="effectposition acrossremindeffecindex" src=""><span class="stagetitle">xxxxxxx数据中心</span></a>
            </div>
            <!--卫星动效--><div class="circleeffectclass aroundfunctioneffect" style="left: 254px;top: 135px;">
                <img class="effectposition arounddataeffect02" src="http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png"><div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div>
                <img class="effectposition acrossremindeffecindex" src="http://repo.bfw.wiki/bfwrepo/icon/5eecac2b81bca.png"><span class="stagetitle stagearoundtitle">xxxxxx系统一</span>
            </div>
            <div class="circleeffectclass aroundfunctioneffect" style="left: 190px;bottom: 89px;">
                <img class="effectposition arounddataeffect01" src="http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png"><div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div>
                <img class="effectposition acrossremindeffecindex" src="http://repo.bfw.wiki/bfwrepo/icon/5eecac2b81bca.png"><span class="stagetitle stagearoundtitle">xxxxxx系统二</span>
            </div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 405px;bottom: 53px;">
                <img class="effectposition arounddataeffect02" src="http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png"><div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div>
                <img class="effectposition acrossremindeffecindex" src="http://repo.bfw.wiki/bfwrepo/icon/5eecac2b81bca.png"><span class="stagetitle stagearoundtitle">xxxxxx系统三</span>
            </div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 243px;bottom: 165px;">
                <img class="effectposition arounddataeffect01" src="http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png"><div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div>
                <img class="effectposition acrossremindeffecindex" src="http://repo.bfw.wiki/bfwrepo/icon/5eecac2b81bca.png"><span class="stagetitle stagearoundtitle">xxxxxx系统四</span>
            </div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 294px;top: 79px;">
                <img class="effectposition arounddataeffect03" src="http://repo.bfw.wiki/bfwrepo/image/5eeca8f6508da.png"><div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div>
                <img class="effectposition acrossremindeffecindex" src="http://repo.bfw.wiki/bfwrepo/icon/5eecac2b81bca.png"><span class="stagetitle stagearoundtitle">xxxxxx系统五</span>
            </div>
            <div class="circleeffectclass decarround01" style="top: 218px;left: 92px;">
                <div class="acrossremindeffectin decarroundin01" style=" "></div>
            </div>
            <div class="circleeffectclass decarround01" style="top: 197px;right: 163px;">
                <div class="acrossremindeffectin decarroundin01" style=" "></div>
            </div>
            <div class="circleeffectclass decarround02" style="top: 99px;right: 93px;">
                <div class="acrossremindeffectin decarroundin02" style=" "></div>
            </div>
        </div>
    </div>
    <!--弹出功能--><div class="popuofunxtionbox">
        <!--标题--><div class="popupboxtitlebox">
            <span class="popupboxtitlemsg">xxxx审批系统数据分析</span><div class="popupboxclose"></div>
        </div>
    </div>
    <!--侧边浮窗--><div class="fltoutbox leftbox">
        <div style="height: 65px; padding-top: 25px;">
            <span class="analyzedatashowtitle">【xxx数据传输量】</span>
        </div>
        <!--左上分析内容放置框--><div class="analyzemsgbgbox" style=" margin-left: 2px;">
            <div class="sent-div" id="container1"></div>
        </div>
        <!--左下分析内容放置框--><div class="analyzemsgbgbox" style="margin-top: 20px; height: 350px;overflow: hidden;">
            <span class="analyzedatashowtitle" style="line-height: 66px;margin-left: 38px">【本日数据接入排行】</span><div class="scrollbox">
                <div id="scrollDiv">
                    <ul>
                        <li>                            本季度执法案件数量超过平均值20%以上。                            <span style="">11/2</span></li><li>                            人员制度管理。                            <span style="">11/2</span></li><li>                            案件超期率超过30%。                            <span style="">11/2</span></li><li>                            本季度执法案件数量超过平均值20%以上。                            <span style="">11/2</span></li><li>                            女性人数偏少，仅占总数的20%，执法过程中女性...！                            <span style="">11/2</span></li><li>                            案件超期率超过30。                            <span style="">11/2</span></li>
                    </ul>
                </div>
                <script type="text/javascript">
                    $("#scrollDiv").Scroll({
                        line: 1, speed: 500, timer: 5000, up: "but_up", down: "but_down"
                    });
                </script>
            </div>
        </div>
        <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
        <div class="fltdecarround fltdecarroundtop fltdecarroundright "></div>
        <div class="fltdecarround fltdecarroundleft fltd.........完整代码请登录后点击上方下载按钮下载查看