Css ——标头文字实时轮播

<div class="tag" style="margin: 50px; width: 300px; background-color: bisque">
      <div class="icon">
        <img src="../../../../assets/logo.png" alt="" />
      </div>
      <div class="wrap">
        <div class="text animateCss" :class="{ animateCss }">
          <p class="text_content_1">{{ '广播通知！CSDN是全球知名中文IT技术交流平台,' }}</p>
          <p class="text_content_2" v-show="animateCss">{{ '广播通知！CSDN是全球知名中文IT技术交流平台,' }}</p>
        </div>
      </div>
    </div>
data(){
	return{
	       animateCss: true,

	}
},
mounted() {
    this.getMove();
  },
methods:{
  //获取text文本 水平横移距离
    getMove() {
      let wrapWidth = document.getElementsByClassName('wrap')[0].clientWidth;
      let textWidth = document.getElementsByClassName('text')[0].clientWidth / 2;
      this.animateCss = wrapWidth < textWidth + 20;
    },
}


.tag {
  height: 44px;
  border-radius: 8px;
  opacity: 1;
  display: flex;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  .audio {
    border: solid 1px #515559;
  }
  .icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 20px;
    img {
      width: 20px;
      height: 20px;
    }
  }
  .wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    white-space: nowrap;
  }
  .animateCss {
    animation: move 10s linear infinite forwards;
  }
  .text {
    position: absolute;
    .text_content_1 {
      padding: 0 20px;
    }
    .text_content_2 {
      padding: 0 20px;
    }
    @keyframes move {
      0% {
        transform: translateX(calc(0));
      }
      100% {
        transform: translateX(calc(-50%));
      }
    }
  }
}