vue--文字自动切换&呼吸效果

最新推荐文章于 2024-05-29 20:27:13 发布

大道寺知世`

最新推荐文章于 2024-05-29 20:27:13 发布

阅读量849

点赞数

文章标签： vue.js javascript css

本文链接：https://blog.csdn.net/weixin_44208050/article/details/122820730

版权

大家好，小白又来啦！
文字自动切换&呼吸效果
啥也不说先上图：
在这里插入图片描述

//
     <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;
  }
}