两种文字从右向左跑马灯效果

参考别人的文字跑马灯效果

<template>
  <div class="noSee">
    <div id="app">
      <!-- <input type="button" value="S" @click="start" />
      <input type="button" value="Stop" @click="stop" /> -->
      <p style="overflow: hidden; height: 20px">{{ msg }}</p>
    </div>

    <!-- <div class="notice-card-wrapper">
      <div class="header">
        <div class="title">
          <div class="message">
            <div class="inner-container">
              <span v-html="notice"></span>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "SystemNotice",
  components: {},
  data() {
    return {
      //   msg: "猥琐发育，别浪！长江后浪推前浪，此时不浪何时浪",
      intervalId: null,
      msg: "渡荆门送别-作者：李白（唐代）鉴赏-渡远荆门外，来从楚国游。山随平野尽，江入大荒流。月下飞天镜,云生结海楼。仍怜故乡水，万里送行舟。",
    };
  },
  computed: {},
  mounted() {
    this.start();
  },
  methods: {
    async start() {
      let cityName = "杭州";
      let self = this;
      await this.post("/weather/weatherByCityName", "", {
        cityName: cityName,
      }).then((data) => {
        console.log("weather data: ", data);
        let str = data.cityWeather;
        console.log("str: ", str);
        this.msg = str;
        //     this.msg=cityName+'天气---'+str[6]+str[5]+str[13]+str[12];
        // self.weaDay = str[6];
        // console.log("str[6]: ", str[6]);
        // self.weaNextDay = str[13];
        // self.weaDayWeather = str[5];
        // self.weaNextDayWeather = str[12];
      });
      // self.weaNextDayWeather
      //   console.log("self.weaNextDayWeather: ", self.weaNextDayWeather);

      if (this.intervalId !== null) {
        return;
      } else {
        this.intervalId = setInterval(() => {
          let startStr = this.msg.substring(0, 1);
          let endStr = this.msg.substring(1);
          this.msg = endStr + startStr;
        }, 200);
      }
    },
    stop() {
      clearInterval(this.intervalId);
      this.intervalId = null;
    },
  },
};
</script>

<style lang="scss" scoped>
// .noSee{
//     background-color: rgb(63, 152, 134);
//     z-index: 999;
// }
// .notice-card-wrapper {
//   .inner-container {
//     margin-left: 130%; // 把文字弄出可见区域
//      100%;
//     animation: myMove 3s linear infinite; // 重点，定义动画
//     animation-fill-mode: forwards;
//   }
//   /*文字无缝滚动*/
//   @keyframes myMove {
//     0% {
//       transform: translateX(0);
//     }
//     100% {
//       transform: translateX(-100px);
//     }
//   }
// }
</style>