预览实时动画效果

src/views/HomeView.vue

@@ -109,9 +109,9 @@
       <!-- 場館實時 -->
       <div class="pcg_item" v-for="item in ssjgNumDatas" :key="item.groupId">
         <span class="pcpos">{{item.groupName}}</span>
-        <p class="pcval" :id="item.groupId">{{ item.allEnter }}</p>
+        <p class="pcval" :class="'pcani'" :id="item.groupId">{{ item.allEnter }}</p>
         <span class="pcrate"
-          :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 }]">{{
+          :class="[{ pcrate2: parseInt(item.proportion) >= 80 && parseInt(item.proportion) < 90 }, { pcrate3: parseInt(item.proportion) >= 90 },'pcani']">{{
             item.proportion }}</span>
       </div>
     </div>
@@ -1091,6 +1091,34 @@ export default {
   margin-left: 2rem;
 }
 
+/** 数据动态绑定后持续动画效果 */
+.pcgrs .pcg_item .pcani{
+  /* 动画效果 */
+  -webkit-animation: ani_txt 8s infinite linear;
+  animation: ani_txt 8s infinite linear;  
+}
+
+@keyframes ani_txt {
+  0%{
+    text-shadow: 0 0 0 30px #fff;
+  }
+  40%{
+    color:rgba(255, 255, 255, 0);
+    text-shadow: 0 0 0 30px #fff;
+  }
+  70%{
+    color:rgba(255, 255, 255, 0.4);
+    text-shadow: 0 0 0 10px #fff;
+  }
+  90%{
+    color:rgba(255, 255, 255, 0.5);
+    text-shadow: 0 0 0 30px #fff;
+  }
+  100%{
+    text-shadow: 0 0 0 40px #fff;
+  }
+}
+
 /* .pcgrs .pcg_item:nth-child(6) .pcval {
   font-size: 1.086rem;
   margin-top: 3.5rem;