大数据可视化动态交互效果-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&q.........完整代码请登录后点击上方下载按钮下载查看