liying5537 3 年之前
父节点
当前提交
acdd6b094c

二进制
ui/src/assets/steamImg/aniimg1.png


二进制
ui/src/assets/steamImg/aniimg2.png


二进制
ui/src/assets/steamImg/aniimg3.png


二进制
ui/src/assets/steamImg/aniimg4.png


二进制
ui/src/assets/steamImg/arror1.png


+ 557 - 3
ui/src/views/front/steamBalance.vue

@@ -102,20 +102,24 @@
         <!-- 管道 -->
         <div class="guan1">
           <img src="@/assets/steamImg/8.png" style="width:1065px;height:29px">
+          <img src="@/assets/steamImg/aniimg1.png" style="width:6px;height:12px" class="aniMove">
         </div>
         <!-- 管道 -->
         <div class="guan2">
           <img src="@/assets/steamImg/9.png" style="width:1174px;height:30px">
+          <img src="@/assets/steamImg/aniimg2.png" style="width:6px;height:12px" class="aniMove">
         </div>
 
         <!-- 管道 -->
         <div class="guan3">
           <img src="@/assets/steamImg/10.png" style="width:864px;height:30px">
+          <img src="@/assets/steamImg/aniimg3.png" style="width:6px;height:12px" class="aniMove">
         </div>
 
          <!-- 管道 -->
         <div class="guan4">
           <img src="@/assets/steamImg/11.png" style="width:1174px;height:30px">
+          <img src="@/assets/steamImg/aniimg4.png" style="width:6px;height:12px" class="aniMove">
         </div>
 
 
@@ -291,62 +295,82 @@
         <div class="jiantoulan pos-1">
           <p class="text1">BFW</p>
           <img src="@/assets/steamImg/jiantoulan1.png" style="width:75px;height:31px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan1">
         </div>
         <div class="jiantoulan pos-2">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan2">
           <p class="num2">5.4</p>
         </div>
         <div class="jiantoulan pos-3">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan3">
            <p class="num2">264</p>
         </div>
         <div class="jiantoulan pos-4">
           <img src="@/assets/steamImg/jiantoulan1.png" style="width:100px;height:31px">
-           <p class="num2">105</p>
-            <p class="name">SC</p>
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan4">
+          <p class="num2">105</p>
+          <p class="name">SC</p>
         </div>
         <div class="jiantoulan pos-5">
           <img src="@/assets/steamImg/jiantoulan3.png" style="width:80px;height:347px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan5-2">
         </div>
         <div class="jiantoulan pos-6">
           <img src="@/assets/steamImg/jiantoulan4.png" style="width:31px;height:150px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan6">
           <p class="num2">33</p>
         </div>
         <div class="jiantoulan pos-7">
           <img src="@/assets/steamImg/jiantoulan5.png" style="width:45px;height:251px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan7">
           <p class="num2">1</p>
         </div>
          <div class="jiantoulan pos-8">
           <img src="@/assets/steamImg/jiantoulan6.png" style="width:34px;height:89px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan8">
           <p class="num2">2</p>
         </div>
         <div class="jiantoulan pos-9">
           <img src="@/assets/steamImg/jiantoulan11.png" style="width:31px;height:75px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan9">
           <p class="num2">5.4</p>
         </div>
         <div class="jiantoulan pos-10">
           <img src="@/assets/steamImg/jiantoulan7.png" style="width:30px;height:46px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan10">
         </div>
         <div class="jiantoulan pos-11">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:60px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan11">
           <p class="num2">0.37</p>
         </div>
         <div class="jiantoulan pos-12">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan12">
           <p class="num2">109</p>
         </div>
         <div class="jiantoulan pos-13">
           <img src="@/assets/steamImg/jiantoulan2.png" style="width:31px;height:50px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan13">
           <p class="num2">109</p>
         </div>
         <div class="jiantoulan pos-14">
           <img src="@/assets/steamImg/jiantoulan10.png" style="width:201px;height:64px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-1">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan14-2">
           <p class="num2">87</p>
           <p class="num3">28</p>
           <p class="name">SC</p>
         </div>
         <div class="jiantoulan pos-15">
           <img src="@/assets/steamImg/jiantoulan9.png" style="width:114px;height:127px">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-1">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-2">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-3">
+          <img src="@/assets/steamImg/arror1.png" style="width:32px;height:31px" class="aniMovelan15-4">
            <p class="num2">6</p>
            <p class="num3">4.3</p>
            <p class="num4">0/0</p>
@@ -412,6 +436,26 @@
           position: absolute;
           left: 20px;
         }
+        .aniMovelan1{
+          -webkit-animation-name:aniMovelan1;
+            animation-name:aniMovelan1;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+          }
+          @keyframes aniMovelan1 {
+            0% {left: 0; opacity: 0;}
+            100% {left:40px;opacity: 1;}
+          }
       }
       &.pos-2{
         top: 130px;
@@ -422,6 +466,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+        .aniMovelan2{
+          -webkit-animation-name:aniMovelan2;
+            animation-name:aniMovelan2;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan2 {
+            0% {top: 0; opacity: 0;}
+            100% {top:40px;opacity: 1;}
+          }
       }
       &.pos-3{
         top: 130px;
@@ -432,6 +498,27 @@
           color: #3659ab;
           position: absolute;
         }
+        .aniMovelan3{
+          -webkit-animation-name:aniMovelan3;
+            animation-name:aniMovelan3;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan3 {
+            0% {top: 0; opacity: 0;}
+            100% {top:40px;opacity: 1;}
+          }
       }
       &.pos-4{
         top: 80px;
@@ -448,10 +535,74 @@
           color: #fff;
           position: absolute;
         }
+
+         .aniMovelan4{
+          -webkit-animation-name:aniMovelan4;
+            animation-name:aniMovelan4;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+          }
+          @keyframes aniMovelan4 {
+            0% {left: 0; opacity: 0;}
+            100% {left:50px;opacity: 1;}
+          }
       }
       &.pos-5{
         top: 200px;
         left: 52px;
+         .aniMovelan5{
+            -webkit-animation-name:aniMovelan5;
+              animation-name:aniMovelan5;
+              -webkit-animation-duration:3s;
+              animation-duration:3s;
+              -webkit-animation-fill-mode:both;
+              animation-fill-mode:both;
+              animation-iteration-count:infinite;
+              -webkit-animation-iteration-count:infinite;
+              font-style:inherit;
+              -webkit-animation-timing-function:linear;
+              animation-timing-function:linear;
+              position: absolute;
+              top: 72px;
+              left: 0px;
+            }
+            @keyframes aniMovelan5 {
+              0% {left: 10px;top: 72px; opacity: 0;}
+              25%{left: 47px;top: 72px; opacity: 1;transform: rotate(90deg);}
+              100% {left: 47px; top:314px;opacity: 0;transform: rotate(90deg);}
+            }
+
+          .aniMovelan5-2{
+            -webkit-animation-name:aniMovelan5-2;
+              animation-name:aniMovelan5-2;
+              -webkit-animation-duration:2s;
+              animation-duration:2s;
+              -webkit-animation-fill-mode:both;
+              animation-fill-mode:both;
+              animation-iteration-count:infinite;
+              -webkit-animation-iteration-count:infinite;
+              font-style:inherit;
+              -webkit-animation-timing-function:linear;
+              animation-timing-function:linear;
+              position: absolute;
+              top: 72px;
+              left: 0px;
+              transform: rotate(-90deg);
+            }
+            @keyframes aniMovelan5-2 {
+              0% {top: 72px; opacity: 0;}
+              100% {top:0;opacity: 1;}
+            }
       }
       &.pos-6{
         top: 400px;
@@ -462,6 +613,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+        .aniMovelan6{
+          -webkit-animation-name:aniMovelan6;
+            animation-name:aniMovelan6;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -1px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan6 {
+            0% {top: 0; opacity: 0;}
+            100% {top:118px;opacity: 1;}
+          }
       }
       &.pos-7{
         top: 300px;
@@ -472,6 +645,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+        .aniMovelan7{
+          -webkit-animation-name:aniMovelan7;
+            animation-name:aniMovelan7;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -1px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan7 {
+            0% {top: 0; opacity: 0;}
+            100% {top:215px;opacity: 1;}
+          }
       }
       &.pos-8{
         top: 300px;
@@ -482,6 +677,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+         .aniMovelan8{
+          -webkit-animation-name:aniMovelan8;
+            animation-name:aniMovelan8;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: 2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan8 {
+            0% {top: 0; opacity: 0;}
+            100% {top:60px;opacity: 1;}
+          }
       }
       &.pos-9{
         top: 300px;
@@ -492,10 +709,53 @@
           color: #3659ab;
           position: absolute;
         }
+
+         .aniMovelan9{
+          -webkit-animation-name:aniMovelan9;
+            animation-name:aniMovelan9;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan9 {
+            0% {top: 0; opacity: 0;}
+            100% {top:40px;opacity: 1;}
+          }
       }
       &.pos-10{
         top: 510px;
         left: 330px;
+         .aniMovelan10{
+          -webkit-animation-name:aniMovelan10;
+            animation-name:aniMovelan10;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 26px;
+            left: -2px;
+            transform: rotate(-90deg);
+          }
+          @keyframes aniMovelan10 {
+            0% {top: 26px; opacity: 0;}
+            100% {top: 0;opacity: 1;}
+          }
       }
       &.pos-11{
         top: 500px;
@@ -506,6 +766,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+        .aniMovelan11{
+          -webkit-animation-name:aniMovelan11;
+            animation-name:aniMovelan11;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan11 {
+            0% {top: 0; opacity: 0;}
+            100% {top: 26px;opacity: 1;}
+          }
       }
       &.pos-12{
         top: 340px;
@@ -516,6 +798,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+        .aniMovelan12{
+          -webkit-animation-name:aniMovelan12;
+            animation-name:aniMovelan12;
+            -webkit-animation-duration:1s;
+            animation-duration:1s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan12 {
+            0% {top: 0; opacity: 0;}
+            100% {top: 26px;opacity: 1;}
+          }
       }
       &.pos-13{
         top: 340px;
@@ -526,6 +830,28 @@
           color: #3659ab;
           position: absolute;
         }
+
+         .aniMovelan13{
+          -webkit-animation-name:aniMovelan13;
+            animation-name:aniMovelan13;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: -15px;
+            left: -2px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan13 {
+            0% {top: -15px; opacity: 0;}
+            100% {top: 26px;opacity: 1;}
+          }
       }
       &.pos-14{
         top: 300px;
@@ -548,6 +874,50 @@
           color: #fff;
           position: absolute;
         }
+
+        .aniMovelan14-1{
+          -webkit-animation-name:aniMovelan14-1;
+            animation-name:aniMovelan14-1;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 34px;
+            left: 0px;
+            // transform: rotate(90deg);
+          }
+          @keyframes aniMovelan14-1 {
+            0% {left:0 ; opacity: 0;}
+            100% {left: 166px;opacity: 1;}
+          }
+
+          .aniMovelan14-2{
+          -webkit-animation-name:aniMovelan14-2;
+            animation-name:aniMovelan14-2;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 10px;
+            left: 80px;
+            transform: rotate(90deg);
+          }
+          @keyframes aniMovelan14-2 {
+            0% {top:10px ; opacity: 0;}
+            100% {top: 30px;opacity: 1;}
+          }
       }
       &.pos-15{
         top: 580px;
@@ -600,6 +970,91 @@
             left: 110px;
           }
         }
+
+        .aniMovelan15-1{
+          -webkit-animation-name:aniMovelan15-1;
+            animation-name:aniMovelan15-1;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0px;
+            left: -12px;
+          }
+          @keyframes aniMovelan15-1 {
+            0% {left:0 ; opacity: 0;}
+            100% {left: 80px;opacity: 1;}
+          }
+
+          .aniMovelan15-2{
+          -webkit-animation-name:aniMovelan15-2;
+            animation-name:aniMovelan15-2;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 34px;
+            left: 15px;
+          }
+          @keyframes aniMovelan15-2 {
+            0% {left:15px ; opacity: 0;}
+            100% {left: 80px;opacity: 1;}
+          }
+
+          .aniMovelan15-3{
+          -webkit-animation-name:aniMovelan15-3;
+            animation-name:aniMovelan15-3;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 62px;
+            left: 15px;
+          }
+          @keyframes aniMovelan15-3 {
+            0% {left:15px ; opacity: 0;}
+            100% {left: 80px;opacity: 1;}
+          }
+
+          .aniMovelan15-4{
+          -webkit-animation-name:aniMovelan15-4;
+            animation-name:aniMovelan15-4;
+            -webkit-animation-duration:2s;
+            animation-duration:2s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 96px;
+            left: -12px;
+          }
+          @keyframes aniMovelan15-4 {
+            0% {left:-12px ; opacity: 0;}
+            100% {left: 80px;opacity: 1;}
+          }
+
       }
   }
   .kuang{
@@ -808,24 +1263,104 @@
     position: absolute;
     top: 20px;
     left: 130px;
+    .aniMove{
+      -webkit-animation-name:aniMove;
+        animation-name:aniMove;
+        -webkit-animation-duration:10s;
+        animation-duration:10s;
+        -webkit-animation-fill-mode:both;
+        animation-fill-mode:both;
+        animation-iteration-count:infinite;
+        -webkit-animation-iteration-count:infinite;
+        font-style:inherit;
+        -webkit-animation-timing-function:linear;
+        animation-timing-function:linear;
+        position: absolute;
+        top: 7px;
+        left: 10px;
+      }
+      @keyframes aniMove {
+        0% {left: 10px; }
+        100% {left: 1050px;}
+     }
   }
-
+  
   .guan2{
     position: absolute;
     top: 170px;
     left: 20px;
+     .aniMove{
+      -webkit-animation-name:aniMove2;
+        animation-name:aniMove2;
+        -webkit-animation-duration:10s;
+        animation-duration:10s;
+        -webkit-animation-fill-mode:both;
+        animation-fill-mode:both;
+        animation-iteration-count:infinite;
+        -webkit-animation-iteration-count:infinite;
+        font-style:inherit;
+        -webkit-animation-timing-function:linear;
+        animation-timing-function:linear;
+        position: absolute;
+        top: 9px;
+        left: 10px;
+      }
+      @keyframes aniMove2 {
+        0% {left: 10px; }
+        100% {left: 1160px;}
+     }
   }
 
   .guan3{
     position: absolute;
     top: 380px;
     left: 330px;
+     .aniMove{
+      -webkit-animation-name:aniMove3;
+        animation-name:aniMove3;
+        -webkit-animation-duration:10s;
+        animation-duration:10s;
+        -webkit-animation-fill-mode:both;
+        animation-fill-mode:both;
+        animation-iteration-count:infinite;
+        -webkit-animation-iteration-count:infinite;
+        font-style:inherit;
+        -webkit-animation-timing-function:linear;
+        animation-timing-function:linear;
+        position: absolute;
+        top: 7px;
+        left: 10px;
+      }
+      @keyframes aniMove3 {
+        0% {left: 10px; }
+        100% {left: 850px;}
+     }
   }
 
   .guan4{
     position: absolute;
     top: 550px;
     left: 20px;
+    .aniMove{
+      -webkit-animation-name:aniMove4;
+        animation-name:aniMove4;
+        -webkit-animation-duration:10s;
+        animation-duration:10s;
+        -webkit-animation-fill-mode:both;
+        animation-fill-mode:both;
+        animation-iteration-count:infinite;
+        -webkit-animation-iteration-count:infinite;
+        font-style:inherit;
+        -webkit-animation-timing-function:linear;
+        animation-timing-function:linear;
+        position: absolute;
+        top: 9px;
+        left: 10px;
+      }
+      @keyframes aniMove4 {
+        0% {left: 10px; }
+        100% {left: 1160px;}
+     }
   }
   .jiantou1{
     position: absolute;
@@ -837,6 +1372,24 @@
       left: -26px;
       top: 20px;  
     }
+    // img{
+    //     -webkit-animation-name:jiantou1-img;
+    //     animation-name:jiantou1-img;
+    //     -webkit-animation-duration:3s;
+    //     animation-duration:3s;
+    //     -webkit-animation-fill-mode:both;
+    //     animation-fill-mode:both;
+    //     animation-iteration-count:infinite;
+    //     -webkit-animation-iteration-count:infinite;
+    //     font-style:inherit;
+    //     -webkit-animation-timing-function:linear;
+    //     animation-timing-function:linear;
+    // }
+    // @keyframes jiantou1-img {
+    //     0% {opacity: 0;}
+    //     50% {opacity: 1;}
+    //     100% {opacity: 0;}
+    // }
   }
   .jiantou2{
     position: absolute;
@@ -1164,4 +1717,5 @@
     left: 770px;
   }
 }
+
 </style>