大家好,小白又来啦!
文字自动切换&呼吸效果
啥也不说先上图:
//
<div>
<div :class="status ? 'animate' : ''">文字一</div>
<div :class="!status ? 'animate' : ''">文字二</div>
</div>
//js
data() {
return {
status: false,
}
},
mounted() {
this.textSwicth()
},
methods: {
textSwicth() {
setInterval(() => {
this.status = !this.status
}, 8000)
},
}
//css
.animate {
animation: myfirst 6s;
}
@keyframes myfirst {
0% {
opacity: 0;
}
25% {
opacity: .5;
}
50% {
opacity: .75;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}