![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<style>
.content{ height:800px; width:100%; background: #000000;position: relative;}
.shper1{ height:30%; width: 50%; border-radius: 50%; margin: 0 auto; background: #1e3a48; position: absolute;bottom:50%; left:0; right:0;}
.border{background:rgba(29, 175, 172, 0.5);background: rgba(24, 133, 131, 0.6); }
.borderbg{border: 1px solid rgb(0, 255, 250);background: rgba(29, 175, 172, 0.5);}
.shper21{ height:100%; width: 100%; border-radius: 50%; margin: -8% auto 0;}
.shper31{ height:100%; width: 100%; border-radius: 50%; margin: -4% auto 0;}
.shper41{ height:100%; width: 100%; border-radius: 50%; margin: -3% auto 0;}
.borderbg-O {height: 40%;width: 65%;border-radius: 50%;margin: 0 auto;border:3px dashed rgba(255, 179, 17, 0.5);background: transparent;bottom:40%;position: absolute;left: 0;right: 0;}
.borderbg-6 {height: 100%;width:100%;border-radius: 50%;margin: 0 auto;border: 2px dotted #0ce1ff;background: transparent;position: absolute;right: 0;}
.borderbg-7 {position: absolute;left: -25px;top: -25px;right: 0;bottom: 0;color: #fff;width: 50px;height: 50px;font-size: 17px;border: 2px solid rgb(24, 210, 206);text-align: center;border-radius: 50%;font-weight: bold;z-index: 1;padding: 5px;}
.borderbg-7:after{position: absolute; width: 100%; height:100%; content: ""; border-radius:50%; left: 0%; top: 0%; background: rgba(11, 234, 255, 0.4); z-index: -1;animation:borderbg-7after 1.8s linear infinite;
box-shadow:0 0 16px inset #FFB311}
.borderbg-7:before{position: absolute; width: 100%; height:100%; content: ""; border-radius:50%; left: 0; top: 0; background: #0BEAFF;z-index: -1;animation:borderbg-7before 1.8s linear infinite;}
@keyframes borderbg-7after{
0%{width: 100%; height: 100%;left: 0%; top: 0%;box-shadow:0 0 16px #00a2b1; opacity: 1;}
100%{ width:0; height: 0;left:50%; top: 50%;box-shadow:0 0 0px #00a2b1;opacity: 0;}
}
@keyframes borderbg-7before{
0%{ background: rgba(11, 234, 255, 0.9)}
100%{ background: rgba(11, 234, 255, 0.3)}
}
.shper7{ position: absolute; height:0; width:0;}
.borderbg-71 { top: 0; left: 50%;}
.borderbg-72 { left: 0; top: 50%;}
.borderbg-73 { right: 0; top: 50%;}
.borderbg-74 { bottom: 0; left: 50%;}
.borderbg-74 span{font-size: 16px;line-height: 25px;}
.borderbg-O:before {position: absolute;width: 110%;height: 140%;content: "";border: 2px dotted #ffb311;border-radius: 50%;left: -5%;top: -20%;}
.sjwjfx-text { text-align: center;font-size: 30px;font-weight: bold;color:#0beaff;text-shadow: 0 3px 0 #116f73;}
.sjwjfx-group { margin-top: -30px;position: relative; z-index: 4;}
.rotate {height: 100%;width: 120%;position: absolute;bottom: 50px;left: -10%;right: 0;}
svg {position: absolute;bottom: -13px;left: -88px;width: 300px;height: 300px;opacity: 0.7;z-index: 1;}
.startcolor{stop-color:#f00}
.stopcolor{stop-color:#5CF0FF;animation:stopcolor 7s linear infinite;}
@keyframes stopcolor{
0%{stop-color:#26e8ff;}
25%{stop-color:#2fbd7f;}
50%{stop-color:#83bd2f;}
75%{stop-color:#bd9d2f;}
100%{stop-color:#ad57de;}
}
.shper21{animation:shper21 1s linear infinite; border:1px solid rgb(0, 255, 250);}
.shper31{animation:shper31 1.5s linear infinite; border:1px solid rgb(0, 255, 250);}
.shper41{animation:shper41 2s linear infinite; border:1px solid rgb(0, 255, 250);}
@keyframes shper21{0%{border:1px solid rgb(0, 255, 250); background: rgba(29, 175, 172, 0.7);}100%{border:1px solid rgba(0, 255, 250, 0.2);background: rgba(29, 175, 172, 0.2);}}
@keyframes shper31{0%{border:1px solid rgb(0, 255, 250);background: rgba(29, 175, 172, 0.7);}100%{border:1px solid rgba(0, 255, 250, 0.2);background: rgba(29, 175, 172, 0.2);}}
@keyframes shper41{0%{border:1px solid rgb(0, 255, 250);background: rgba(29, 175, 172, 0.7);}100%{border:1px solid rgba(0, 255, 250, 0.2);background: rgba(29, 175, 172, 0.2);}}
.shper2{ height:11%; width: 20%; border-radius: 50%; margin: 0 auto; position: absolute; bottom:48%; left:0; right:0;box-shadow: 0 30px 20px rgba(0, 0, 0, 0);animation:shper2shadow 1s linear infinite;}
.shper3{ height:30%; width: 45%; border-radius: 50%; margin: 0 auto;position: absolute; bottom:30%; left:0; right:0; box-shadow: 0 30px 20px rgba(0, 0, 0, 0);animation:shper3shadow 1.5s linear infinite;}
.shper4{ height:50%; width: 65%; border-radius: 50%; margin: 0 auto;position: absolute; bottom:15%; left:0; right:0; box-shadow: 0 30px 20px rgba(0, 0, 0, 0);animation:shper4shadow 2s linear infinite;}
@keyframes shper2shadow{
0%{ box-shadow: 0 30px 20px rgba(0, 199, 175,0.2);}
50%{box-shadow: 0 30px 20px rgba(0, 199, 175, 0.4);}
100%{box-shadow: 0 30px 20px #00c7af;}
}
@keyframes shper3shadow{
0%{box-shadow: 0 30px 30px rgba(0, 199, 175, 0.2);}
50%{box-shadow: 0 30px 30px rgba(0, 199, 175, 0.4);}
100%{box-shadow: 0 30px 30px #00c7af;}
}
@keyframes shper4shadow{
0%{box-shadow: 0 30px 60px rgba(0, 199, 175,0.2);}
50%{box-shadow: 0 30px 60px rgba(0, 199, 175, 0.4);}
100%{box-shadow: 0 30px 60px #00c7af;}
}
</style>
<body>
<div class="content">
<div class="shper1">
<div class="shper4 border">
<div class="shper41 borderbg"></div>
</div>
<div class="shper3 border">
<div class="shper31 borderbg"></div>
</div>
<div class="shper2 border">
<div class="shper21 borderbg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="圖層_1" x="0px" y="0px" width="170px" height="270px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="249.6133" y1="-36.4307" x2="250.5843" y2="502.5403">
<stop class="startcolor" offset="0.0696" style="stop-color:#00575C;stop-opacity:0"></stop>
<stop class="stopcolor" offset="1" style="stop-color:#5CF0FF"></stop>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M249.865,0C113.018,0,2.082,46.03,2.082,102.812c0,2.043,0.143,4.068,0.427,6.082H2.297l0.475,1.641 c0.563,3.15,1.467,6.257,2.698,9.319l97.848,337.942h0.157C108.86,481.382,172.344,500,249.865,500 c77.521,0,141.004-18.618,146.389-42.204l0.002-0.01l0.01-0.035l98.75-339.901l0.007-0.02c0.605-1.715,1.109-3.447,1.508-5.192 l0.005-0.019c0.735-3.227,1.111-6.5,1.111-9.808C497.646,46.03,386.711,0,249.865,0z"></path>
</svg>
</div>
</div>
<div class="shper5 borderbg-O">
<div class="sjwjfx-group">
<div class="sjwjfx-text">數據</div>
<div class="sjwjfx-text">挖掘分析</div>
</div>
</div>
<div class="rotate">
<div class="shper6 borderbg-6">
<div class="shper7 borderbg-71"><span class="borderbg-7">申請訂單</span></div>
<div class="shper7 borderbg-72"><span class="borderbg-7">訂單入庫</span></div>
<div class="shper7 borderbg-73"><span class="borderbg-7">入庫投運</span></div>
<div class="shper7 borderbg-74"><span class="borderbg-7">投運資本化</span></div>
</div>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
