一.代码
<!-- 呼吸效果 -->
<div class="root">
<h2 :style="{opacity}">呼吸效果
</h2>
</div>
const vm = new Vue({
el: '.root',
data() {
return {
opacity: 1
}
},
mounted() {
this.change()
},
methods: {
change() {
setInterval(() => {
vm.opacity -= 0.01 //透明度减0.01
if (vm.opacity <= 0) vm.opacity = 1 //当透明度为0就重新设为1
}, 16);
}
},
})
二.效果
这里文字透明度是渐变的,只是截图显示的当前状态