租房模板动效调整

src/templates/listingInformation/pages/property.vue

@@ -101,8 +101,14 @@ export default {
         "http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/house.png",
         "http://visual-clouds.oss-cn-beijing.aliyuncs.com/resource/listing-information/bg.jpg"
       ],
+
       swiperOption: {
-        effect: "fade"
+        effect: "slider",
+        speed: 1000,
+        loop: true,
+        autoplay: {
+          delay: 5000
+        }
       }
     };
   }
@@ -113,11 +119,43 @@ export default {
 @keyframes moveTo {
   0% {
     left: -50px;
-    top: -20px;
+    top: 0px;
+  }
+  100% {
+    left: 300px;
+    top: 0;
+  }
+}
+@keyframes moveTo2 {
+  0% {
+    background-position: -100% 0;
+    // transform: scale(1.2)
   }
   100% {
-    left: 100%;
-    top: -20px;
+    background-position: 100% 0;
+  }
+}
+@keyframes move {
+  0% {
+    transform: skew(10deg);
+  }
+  15% {
+    transform: scale(1.1);
+  }
+  30% {
+    transform: skew(10deg);
+  }
+  40% {
+    transform: skew(-10deg);
+  }
+  60% {
+    transform: skew(10deg);
+  }
+  80% {
+    transform: skew(-10deg);
+  }
+  100% {
+    transform: skew(10deg);
   }
 }
 .bgliner {
@@ -167,8 +205,8 @@ export default {
     left: 1279px;
     display: flex;
     align-items: center;
+    z-index: 3;
     .center-v {
-
     }
     .title {
       font-size: 49px;
@@ -181,26 +219,41 @@ export default {
       overflow: hidden;
       font-weight: bold;
       perspective: 800px;
+      display: inline-block;
+      height: 100px;
+      width: auto;
       color: rgba(229, 59, 81, 1);
       font-size: 45px;
+      // background-position: 50% 0;
+      // background-blend-mode: lighten;
+      background: linear-gradient( -30deg, rgba(255,255,255, 1) 10px,  rgba(255,255,255, 1) 10px) no-repeat;
+      -webkit-background-clip: text;
+      // animation: moveTo2 12s infinite alternate ease-in-out;
       .mirror-light {
         position: absolute;
         top: 10px;
         left: 0;
-        height: 200px;
+        height: 150%;
         width: 10px;
         animation: moveTo 10s infinite;
-        background: rgba(255,255,255, 0.8);
-        transform: rotate(30deg)
+        background: rgba(255, 255, 255, 0.8);
+        transform: rotate(30deg);
+        -webkit-filter: blur(2px);
+        // mix-blend-mode: overlay;
       }
       .number {
         font-size: 100px;
         font-family: DINCondensed-Bold;
+        // mix-blend-mode: normal;
+        position: relative;
+        display: inline;
+        overflow: hidden;
       }
       margin-bottom: 80px;
     }
     .high-light {
       width: 577px;
+      // -webkit-filter: contrast(20);
       position: relative;
       display: flex;
       border: 1px solid #e6e6e6;
@@ -209,6 +262,7 @@ export default {
       box-sizing: border-box;
       padding: 22px 51px;
       justify-content: space-between;
+      // background: black;
       .high-light-item {
         box-sizing: border-box;
         padding-top: 25px;
@@ -219,18 +273,29 @@ export default {
         border-radius: 50%;
         width: 114px;
         height: 114px;
+        z-index: 2;
         &::after {
           content: "";
           background: rgba(229, 59, 81, 1);
-          opacity: 0.2;
+          opacity: 0.5;
+          // -webkit-filter: blur(20px);
           left: -4px;
           top: -4px;
           position: absolute;
-          z-index: 0;
+          z-index: -1;
           text-align: center;
           border-radius: 50%;
           width: 122px;
           height: 122px;
+          animation: move 12s infinite alternate ease-in-out;
+        }
+        &:nth-child(2)::after {
+          animation-duration: 14.7s;
+          animation-delay: -2.7s;
+        }
+        &:nth-child(3)::after {
+          animation-duration: 8.7s;
+          animation-delay: -5.32s;
         }
         .high-light-item-top {
           font-size: 29px;