首页样式修改

src/components/Banner.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="banner">
+    <div class="left-trans">
+      <div class="animation-area">
+        <img src="../assets/home/line-right.gif" class="line-left" alt="">
+        <img src="../assets/home/box.png" class="box-left" alt="">
+        <div class="circle-area">
+          <img src="../assets/home/cicle-out.png" class="left-out-cicle" alt="">
+          <img src="../assets/home/cicle-inner.png" class="left-inner-cicle" alt="">
+        </div>
+      </div>
+    </div>
+
     <div class="middle">
       <div class="search-box">
         <h1>区块链浏览器</h1>
@@ -15,6 +26,17 @@
         </div>
       </div>
     </div>
+
+    <div class="right-trans">
+      <div class="animation-area flex-between-stright">
+        <div class="circle-area">
+          <img src="../assets/home/cicle-out.png" class="right-out-cicle" alt="">
+          <img src="../assets/home/cicle-inner.png" class="right-inner-cicle" alt="">
+        </div>
+        <img src="../assets/home/box.png" class="box-right" alt="">
+        <img src="../assets/home/line-left.gif" class="line-right" alt="">
+      </div>
+    </div>
   </div>
 </template>
 
@@ -124,12 +146,107 @@ const onSearch = () => {
   align-items: center;
   justify-content: center;
 
+  .left-trans,
+  .middle,
+  .right-trans {
+    display: inline-block;
+    height: 556px;
+  }
+
+  .left-trans {
+    width: 150px;
+    background: url("../assets/home/left-line.png") no-repeat top 60px left;
+    overflow: hidden;
+
+    .animation-area {
+      position: relative;
+      margin-top: 60px;
+      height: 450px;
+      float: right;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .box-left {
+      margin-top: -40px;
+      margin-left: -40px;
+      animation: jump 2s ease-in-out 1s infinite alternate;
+    }
+
+    .circle-area {
+      position: relative;
+      width: 91px;
+      height: 91px;
+
+      .left-out-cicle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        animation: clockwise 2.5s linear infinite;
+      }
+
+      .left-inner-cicle {
+        width: 70px;
+        position: absolute;
+        left: 10px;
+        top: 11px;
+        animation: anticlockwise 2.5s linear infinite;
+      }
+    }
+  }
+
+  .right-trans {
+    width: 150px;
+    background: url("../assets/home/right-line.png") no-repeat top 60px right;
+    overflow: hidden;
+
+    .animation-area {
+      position: relative;
+      margin-top: 60px;
+      height: 450px;
+      float: left;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: column;
+    }
+
+    .box-right {
+      margin-right: -30px;
+      animation: jump 2s ease-in-out 0.1s infinite alternate;
+    }
+
+    .circle-area {
+      position: relative;
+      width: 91px;
+      height: 91px;
+
+      .right-out-cicle {
+        position: absolute;
+        left: 0;
+        top: 0;
+        animation: clockwise 2.5s linear infinite;
+      }
+
+      .right-inner-cicle {
+        width: 70px;
+        position: absolute;
+        left: 10px;
+        top: 12px;
+        animation: anticlockwise 2.5s linear infinite;
+      }
+    }
+  }
+
   .middle {
     height: 556px;
     position: relative;
     width: 1000px;
     flex-shrink: 0;
-    background: url("/assets/images/ball.png") center center no-repeat;
+    background: url("../assets/ball.png") center center no-repeat;
 
     .search-box {
       width: 700px;
@@ -190,4 +307,32 @@ const onSearch = () => {
     }
   }
 }
+
+// 动画区
+@keyframes clockwise {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes anticlockwise {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@keyframes jump {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, 15px);
+  }
+}
 </style>