vue动态修改样式css var()和闪烁小红点动画

根据服务端下发颜色值，动态太改变样式，发现了var() 函数非常适用，这么写了个demo随笔记录，方便以后查阅。

展示效果如下：

HTML部分

<div>
   <p class="ttext"  :style="{ '--tcolor': colorArray[0] }">测试动态颜色0</p>
   <p class="ttext"  :style="{ '--tcolor': colorArray[1] }">测试动态颜色1</p>
   <p class="ttext"  :style="{ '--tcolor': colorArray[2] }">测试动态颜色2</p>
   <p class="ttext"  :style="{ '--tcolor': colorArray[3] }">测试动态颜色3</p>
 </div>

数据定义（可服务端下发）

  data() {
    return {
      colorArray: [
        "orange",
        "green",
        "purple",
        "red"
      ] ,
    }

css部分

.ttext {
  margin-top: 30px;
  color: var(--tcolor);
  text-align: center;
  font-size: 20px;
}

注：在data里面定义一个变量，css用var()函数来使用这个变量，变量前要加--

2、闪烁小红点

展示效果如下：

HTML部分

 <div>
      <p class="tttext"  :style="{ '--tcolor': colorArray[0] }">
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>
      测试动态颜色0
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>

      <p class="tttext"  :style="{ '--tcolor': colorArray[1] }">
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>
      测试动态颜色1
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>

      <p class="tttext"  :style="{ '--tcolor': colorArray[2] }">
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>
       测试动态颜色2
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>

      <p class="tttext"  :style="{ '--tcolor': colorArray[3] }">
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span>
      测试动态颜色3
      <span class="red-dot" v-bind:class="{ blinking: isBlinking }"></span></p>
</div>

通过isBlinking: true 来控制

css部分

.red-dot {
width: 10px;

height: 10px;

background-color: red;

border-radius: 50%;

display: inline-block;

}

.blinking {
animation: blink 1s infinite;

}

@keyframes blink {
0%,

100% {
opacity: 1;

}

50% {
opacity: 0;

}

}

如果对您有帮助，帮忙关注下，您的关注是我更新最大的动力！谢谢~~