前端实现跑马灯

<!--
 * @Author: wangrui
 * @Description: 跑马灯
 * @Date: 2024-11-08 11:45:17
 * @LastEditors: Do not edit
-->
<script setup lang="ts">
import { ref, watchEffect,withDefaults } from 'vue';
const props = withDefaults(defineProps<{
    notice: string[];
    duration?: number; 
    marqueeWrapperStyle?:Record<string, string>;
    marqueeItemStyle?:Record<string, string>;
}>(), {
    marqueeWrapperStyle: () => ({}),
    marqueeItemStyle: () => ({}),
    duration: 20
});

const MarqueeItemNameArr = ref(['origin', 'copy']);
const speed = ref(2);

const initSpeed = () => {
  if (!props.notice.length) {
    return false
 };
  const str = props.notice.join('').length;
  speed.value = (str / 40) * props.duration;
};

watchEffect(() => {
  if (props.notice.length) {
    initSpeed();
  }
});
</script>

<template>
    <div class="marquee" :style="marqueeWrapperStyle">
      <ol
        class="marquee-wrapper"
        :style="{
          animationDuration: `${speed}s`,
          WebkitAnimationDuration: `${speed}s`,
        }"
      >
        <li
          v-for="name in MarqueeItemNameArr"
          :key="`item-${name}`"
          class="marquee-item"
        >
          <div
            v-for="(item, index) in notice"
            :key="`item-${name}-${index}`"
            class="item"
            :style="marqueeItemStyle"
          >
            {{ item }}
          </div>
        </li>
      </ol>
    </div>
  </template>
<style scoped lang="scss">
ol,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.marquee {
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: left, right;
  mask-image: 
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0)),
    linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0));
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: left, right;
}
.marquee-wrapper {
  height: inherit;
  margin: 0;
  padding: 0;
  will-change: transform;
  transform: translateZ(0);
  white-space: nowrap;
  -webkit-animation: marquee-ani linear infinite;
  animation: marquee-ani linear infinite;
}

.marquee-item {
  height: inherit;
  display: inline-block;
}

.item {
  margin-right: 40px;
  display: inline-block;
  font-size: 32px;
  color: #fff;
}
@-webkit-keyframes marquee-ani {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes marquee-ani {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}
</style>