純css 實現文字輪播顯示

客戶永遠喜歡把一堆資訊塞在小小的方格裡，這次遇到的需求是要把多個文字進行像圖片那樣的自動輪播，以下已 vue 來示範 （主要使用css）

// 組件

<template>
  <div class="carousel-container" carousel-theme="speed">
    <ul class="rwd-text_title">
      <slot />
    </ul>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  props: {
    length: {
      type: Number,
    },
  },
  setup(props) {
    const amount = computed(() => props.length)

    return { amount }
  },
}
</script>

<style lang="scss">
$s: v-bind(amount);

:root {
  --h: 16;
  --speed: 1.8s;
}

.carousel-container {
  position: relative;
  top: 0;
  width: 50%;
  color: black;
  overflow: hidden;
}

.carousel-container {
  ul {
    position: absolute;
    top: -0.24em;
    left: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    animation: move calc(v-bind(amount) * var(--speed)) steps($s) infinite;
  }
  li {
    flex-shrink: 0;
    width: 100%;
    padding-left: 10px;
    text-align: right;
    box-sizing: border-box;
    white-space: nowrap;
    animation: liMove var(--speed) infinite;
  }
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(v-bind(amount) * var(--h) * -1px));
  }
}

@keyframes liMove {
  0% {
    transform: translate(0, 0);
  }
  80%,
  100% {
    transform: translate(0, calc(var(--h) * -1px));
  }
}
</style>

調用：

<carousel-text :length="6">
    <li v-for="idx in 6" :key="`carousel-${idx}`">
      輪播文字－－－－－－－－－
    </li>
    <!-- 末尾補一個首尾數據 -->
    <li v-if="alarmConditions.length">
      輪播文字－－－－－－－－－～
    </li>
</carousel-text>

先暫時更新，晚點再來補說明