当前位置：首页 > VUE

vue 实现边框闪烁

2026-02-17 04:54:16VUE

在 Vue 中实现边框闪烁效果可以通过 CSS 动画或 JavaScript 动态控制样式来实现。以下是几种常见方法：

使用 CSS 动画

通过 @keyframes 定义动画，结合 Vue 的 v-bind:class 动态切换样式类。

vue 实现边框闪烁

<template>
  <div :class="{ 'blinking-border': isBlinking }">内容</div>
</template>

<style>
.blinking-border {
  border: 2px solid transparent;
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { border-color: transparent; }
  50% { border-color: #ff0000; }
  100% { border-color: transparent; }
}
</style>

<script>
export default {
  data() {
    return {
      isBlinking: true
    };
  }
};
</script>

动态绑定内联样式

通过 Vue 的 v-bind:style 动态修改边框颜色，结合 setInterval 控制闪烁频率。

vue 实现边框闪烁

<template>
  <div :style="{ border: `2px solid ${borderColor}` }">内容</div>
</template>

<script>
export default {
  data() {
    return {
      borderColor: 'transparent',
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      this.borderColor = this.borderColor === 'transparent' ? '#ff0000' : 'transparent';
    }, 500);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }
};
</script>

结合 CSS 变量

利用 CSS 变量和 Vue 响应式数据实现更灵活的控制。

<template>
  <div class="border-box" :style="{'--border-color': borderColor}">内容</div>
</template>

<style>
.border-box {
  border: 2px solid var(--border-color);
  transition: border-color 0.5s ease;
}
</style>

<script>
export default {
  data() {
    return {
      borderColor: 'transparent'
    };
  },
  mounted() {
    setInterval(() => {
      this.borderColor = this.borderColor === 'transparent' ? '#ff0000' : 'transparent';
    }, 500);
  }
};
</script>

使用第三方动画库

若项目已引入如 animate.css，可直接复用预定义动画。

<template>
  <div class="animate__animated animate__flash animate__infinite">内容</div>
</template>

<script>
import 'animate.css';
export default {};
</script>

以上方法均可实现边框闪烁效果，CSS 动画性能更优，而 JavaScript 动态控制更适合需要复杂逻辑的场景。