背景动态

src/views/shopping/index.vue

@@ -60,8 +60,17 @@ export default {
   position: relative;
   width: 85vw;
   margin: 5vw auto;
-  background-color: rgba(245, 245, 245, 1);
   border-radius: 20px;
+  background-color: #ededed;
+  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%) #ededed;
+  background-size: 200% 100%;
+  background-position-x: 180%;
+  animation: loading 1s ease-in-out infinite;
+  @keyframes loading {
+    to{
+      background-position-x: -20%;
+    }
+  }
   .img {
     width: 100%;
     border-radius: 20px;