提交

src/view/SilkRoadSpringFestivalGala/pages/fourth.vue

@@ -4,7 +4,7 @@
       <img src="../../../assets/img/top4.png" />
       <label for="file">
         <img
-          :class="{ camere: true, animate__shake: d }"
+          :class="{ camere: true, shakeSlow: dou }"
           src="../../../assets/img/camere.png"
         />
       </label>
@@ -14,7 +14,7 @@
     <input
       type="file"
       accept="image/*"
-      style="display: none;"
+      style="display: none"
       id="file"
       capture="environment"
       @change="inputFile"
@@ -22,7 +22,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineEmits } from "vue";
+import {  ref, defineEmits } from "vue";
 // import { onMounted, reactive } from "vue";
 // import { isIpad, isIpod, isIphone } from "../../utils/isTerminal";
 /**
@@ -31,7 +31,6 @@ import { ref, defineEmits } from "vue";
  * window.$originData.urlParames url参数
  */
 const emits = defineEmits(["changePage"]);
-const d = ref(false);
 window.addEventListener(
   "devicemotion",
   function (e) {
@@ -41,13 +40,15 @@ window.addEventListener(
   },
   true
 );
-let t = setTimeout(() => {
-  clearTimeout(t);
-  d.value = true;
-}, 2000);
+
+const dou = ref(false);
 
 function inputFile() {
-  emits("changePage", "five")
+  dou.value = true;
+  let t = setTimeout(() => {
+    clearTimeout(t);
+    emits("changePage", "five");
+  }, 2000);
 }
 </script>
 <style lang="scss" scoped>
@@ -70,5 +71,162 @@ function inputFile() {
       margin: 2em auto;
     }
   }
+
+  @keyframes shake-slow {
+    2% {
+      transform: translate(6px, -2px) rotate(3.5deg);
+    }
+    4% {
+      transform: translate(5px, 8px) rotate(-0.5deg);
+    }
+    6% {
+      transform: translate(6px, -3px) rotate(-2.5deg);
+    }
+    8% {
+      transform: translate(4px, -2px) rotate(1.5deg);
+    }
+    10% {
+      transform: translate(-6px, 8px) rotate(-1.5deg);
+    }
+    12% {
+      transform: translate(-5px, 5px) rotate(1.5deg);
+    }
+    14% {
+      transform: translate(4px, 10px) rotate(3.5deg);
+    }
+    16% {
+      transform: translate(0px, 4px) rotate(1.5deg);
+    }
+    18% {
+      transform: translate(-1px, -6px) rotate(-0.5deg);
+    }
+    20% {
+      transform: translate(6px, -9px) rotate(2.5deg);
+    }
+    22% {
+      transform: translate(1px, -5px) rotate(-1.5deg);
+    }
+    24% {
+      transform: translate(-9px, 6px) rotate(-0.5deg);
+    }
+    26% {
+      transform: translate(8px, -2px) rotate(-1.5deg);
+    }
+    28% {
+      transform: translate(2px, -3px) rotate(-2.5deg);
+    }
+    30% {
+      transform: translate(9px, -7px) rotate(-0.5deg);
+    }
+    32% {
+      transform: translate(8px, -6px) rotate(-2.5deg);
+    }
+    34% {
+      transform: translate(-5px, 1px) rotate(3.5deg);
+    }
+    36% {
+      transform: translate(0px, -5px) rotate(2.5deg);
+    }
+    38% {
+      transform: translate(2px, 7px) rotate(-1.5deg);
+    }
+    40% {
+      transform: translate(6px, 3px) rotate(-1.5deg);
+    }
+    42% {
+      transform: translate(1px, -5px) rotate(-1.5deg);
+    }
+    44% {
+      transform: translate(10px, -4px) rotate(-0.5deg);
+    }
+    46% {
+      transform: translate(-2px, 2px) rotate(3.5deg);
+    }
+    48% {
+      transform: translate(3px, 4px) rotate(-0.5deg);
+    }
+    50% {
+      transform: translate(8px, 1px) rotate(-1.5deg);
+    }
+    52% {
+      transform: translate(7px, 4px) rotate(-1.5deg);
+    }
+    54% {
+      transform: translate(10px, 8px) rotate(-1.5deg);
+    }
+    56% {
+      transform: translate(-3px, 0px) rotate(-0.5deg);
+    }
+    58% {
+      transform: translate(0px, -1px) rotate(1.5deg);
+    }
+    60% {
+      transform: translate(6px, 9px) rotate(-1.5deg);
+    }
+    62% {
+      transform: translate(-9px, 8px) rotate(0.5deg);
+    }
+    64% {
+      transform: translate(-6px, 10px) rotate(0.5deg);
+    }
+    66% {
+      transform: translate(7px, 0px) rotate(0.5deg);
+    }
+    68% {
+      transform: translate(3px, 8px) rotate(-0.5deg);
+    }
+    70% {
+      transform: translate(-2px, -9px) rotate(1.5deg);
+    }
+    72% {
+      transform: translate(-6px, 2px) rotate(1.5deg);
+    }
+    74% {
+      transform: translate(-2px, 10px) rotate(-1.5deg);
+    }
+    76% {
+      transform: translate(2px, 8px) rotate(2.5deg);
+    }
+    78% {
+      transform: translate(6px, -2px) rotate(-0.5deg);
+    }
+    80% {
+      transform: translate(6px, 8px) rotate(0.5deg);
+    }
+    82% {
+      transform: translate(10px, 9px) rotate(3.5deg);
+    }
+    84% {
+      transform: translate(-3px, -1px) rotate(3.5deg);
+    }
+    86% {
+      transform: translate(1px, 8px) rotate(-2.5deg);
+    }
+    88% {
+      transform: translate(-5px, -9px) rotate(2.5deg);
+    }
+    90% {
+      transform: translate(2px, 8px) rotate(0.5deg);
+    }
+    92% {
+      transform: translate(0px, -1px) rotate(1.5deg);
+    }
+    94% {
+      transform: translate(-8px, -1px) rotate(0.5deg);
+    }
+    96% {
+      transform: translate(-3px, 8px) rotate(-1.5deg);
+    }
+    98% {
+      transform: translate(4px, 8px) rotate(0.5deg);
+    }
+    0%,
+    100% {
+      transform: translate(0, 0) rotate(0);
+    }
+  }
+  .shakeSlow {
+    animation: shake-slow 2s 1 ease-in-out;
+  }
 }
 </style>