vue2 css 边框闪烁效果 完整代码
时间: 2024-07-23 12:01:30 浏览: 53
在Vue2中,如果你想实现CSS边框闪烁的效果,通常会利用JavaScript定时器配合伪类`:hover`来实现动画。下面是一个简单的例子,假设我们有一个按钮元素:
```html
<template>
<div id="flashing-border">
<button @mouseover="startFlashing" @mouseout="stopFlashing">点击我</button>
</div>
</template>
<script>
export default {
methods: {
startFlashing() {
this.flashing = true;
const borderElement = document.querySelector('#flashing-border button');
setInterval(() => {
borderElement.style.border = this.flashing ? '2px solid red' : 'none';
}, 500);
},
stopFlashing() {
this.flashing = false;
clearInterval();
}
},
data() {
return {
flashing: false,
};
},
};
</script>
<style scoped>
#flashing-border button {
transition: all 0.3s ease-in-out; /* 添加过渡效果,使得切换更平滑 */
}
</style>
```
在这个例子中,当鼠标悬停在按钮上时,`startFlashing`方法会被触发,开始每半秒改变一次边框颜色;移开鼠标时,`stopFlashing`停止动画。`transition`属性保证了变换过程中的平滑过渡。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)