跑馬燈

<!-- ✅ 可直接嵌入的置中跑馬燈範例 -->

<div class="marquee-container">

  <div class="marquee-wrapper" aria-label="跑馬燈">

    <div class="marquee-track">

      <div class="marquee-content">

        <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

        <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

        <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

        <span class="item color4">第四段文字：這是第三段跑馬燈內容。</span>

      </div>

      <div class="marquee-content" aria-hidden="true">

        <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

        <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

        <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

        <span class="item color4">第四段文字：這是第三段跑馬燈內容。</span>

      </div>

    </div>

  </div>

</div>

<style>

  :root {

    --marquee-duration: 28s; /* 速度 */

    --font-size: 24px;       /* 字體大小 */

  }

  /* ✅ 外層容器：讓跑馬燈在嵌入頁面中間顯示 */

  .marquee-container {

    display: flex;

    justify-content: center;  /* 水平置中 */

    align-items: center;      /* 垂直置中 */

    width: 100%;

    height: 100%;             /* 若協作平台允許，可讓容器佔滿嵌入區高度 */

    box-sizing: border-box;

  }

  .marquee-wrapper {

    width: 100%;

    max-width: 100%;           /* 內容最大寬度，可調整為 80%、70% 等 */

    overflow: hidden;

    box-sizing: border-box;

  }

  .marquee-track {

    display: flex;

    width: 200%;

    align-items: center;

    animation: marquee-move linear infinite;

    animation-duration: var(--marquee-duration);

  }

  /* 滑鼠移入暫停 */

  .marquee-wrapper:hover .marquee-track {

    animation-play-state: paused;

  }

  .marquee-content {

    display: flex;

    flex-wrap: nowrap;

    white-space: nowrap;

    align-items: center;

    gap: 4rem;

    padding-left: 2%;

  }

  .item {

    font-family: "DFKai-SB", "標楷體", "Microsoft JhengHei", "PingFang TC", serif;

    font-size: var(--font-size);

    line-height: 1.5;

    white-space: nowrap;

  }

  .color1 { color: #0B5FFF; } /* 藍色 */

  .color2 { color: #FF8E0E; } /* 紅色 E03E2D*/

  .color3 { color: #008A44; } /* 綠色 */

  .color4 { color: #000000; } /* 黑色 */

  @keyframes marquee-move {

    0% { transform: translateX(0); }

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

  }

  /* ✅ 響應式字型 */

  @media (max-width: 600px) {

    :root { 

    --font-size: 18px;  /* 較小螢幕時，字型再縮小一些 */

    --marquee-duration: 20s; /* 加快跑馬燈速度 */

  }

</style>

<!-- ✅ 可直接嵌入的置中跑馬燈範例 -->

<div class="marquee-container">

  <div class="marquee-wrapper" aria-label="跑馬燈">

    <div class="marquee-track">

      <div class="marquee-content">

        <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

        <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

        <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

      </div>

      <div class="marquee-content" aria-hidden="true">

        <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

        <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

        <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

      </div>

    </div>

  </div>

</div>

<style>

  :root {

    --marquee-duration: 25s; /* 速度 */

    --font-size: 24px;       /* 字體大小 */

  }

  /* ✅ 外層容器：讓跑馬燈在嵌入頁面中間顯示 */

  .marquee-container {

    display: flex;

    justify-content: center;  /* 水平置中 */

    align-items: center;      /* 垂直置中 */

    width: 100%;

    height: 100%;             /* 若協作平台允許，可讓容器佔滿嵌入區高度 */

    box-sizing: border-box;

  }

  .marquee-wrapper {

    width: 100%;

    max-width: 90%;           /* 內容最大寬度，可調整為 80%、70% 等 */

    overflow: hidden;

    box-sizing: border-box;

  }

  .marquee-track {

    display: flex;

    width: 200%;

    align-items: center;

    animation: marquee-move linear infinite;

    animation-duration: var(--marquee-duration);

  }

  /* 滑鼠移入暫停 */

  .marquee-wrapper:hover .marquee-track {

    animation-play-state: paused;

  }

  .marquee-content {

    display: flex;

    flex-wrap: nowrap;

    white-space: nowrap;

    align-items: center;

    gap: 4rem;

    padding-left: 2%;

  }

  .item {

    font-family: "DFKai-SB", "標楷體", "Microsoft JhengHei", "PingFang TC", serif;

    font-size: var(--font-size);

    line-height: 1.5;

    white-space: nowrap;

  }

  .color1 { color: #0B5FFF; } /* 藍色 */

  .color2 { color: #E03E2D; } /* 紅色 、橘色-#FF8E0E*/

  .color3 { color: #008A44; } /* 綠色 */

  @keyframes marquee-move {

    0% { transform: translateX(0); }

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

  }

  /* ✅ 響應式字型 */

  @media (max-width: 600px) {

    :root { --font-size: 20px; }

  }

</style>

<!-- 可直接嵌入的跑馬燈範例 -->

<div class="marquee-wrapper" aria-label="跑馬燈">

  <div class="marquee-track">

    <!-- 內容區塊（會自動複製以達到無縫循環效果） -->

    <div class="marquee-content">

      <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

      <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

      <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

    </div>

    <div class="marquee-content" aria-hidden="true">

      <!-- 複製一份相同內容以確保無縫循環 -->

      <span class="item color1">第一段文字：這是第一段跑馬燈內容。</span>

      <span class="item color2">第二段文字：這是第二段跑馬燈內容。</span>

      <span class="item color3">第三段文字：這是第三段跑馬燈內容。</span>

    </div>

  </div>

</div>

<style>

  /* 變數：調整速度（秒） */

  :root {

    --marquee-duration: 25s; /* 速度：一次完整循環所需時間 */

    --font-size: 24px;       /* 字體大小 */

  }

  .marquee-wrapper{

    width: 100%;

    overflow: hidden;

    box-sizing: border-box;

    /* 可視需要加背景/間距 */

    padding: 6px 0;

  }

  .marquee-track{

    display: flex;

    width: 200%; /* 兩份內容並列，便於做 -50% 的平移來達成無縫滾動 */

    align-items: center;

    /* 動畫：從 0% 到 -50% (等於內容寬度的一半) */

    animation: marquee-move linear infinite;

    animation-duration: var(--marquee-duration);

    /* 當滑鼠移入最外層時會暫停（透過 :hover 控制） */

  }

  /* 將滑鼠懸停時暫停動畫（包含鍵盤 focus 可視需求再加） */

  .marquee-wrapper:hover .marquee-track,

  .marquee-wrapper:focus-within .marquee-track {

    animation-play-state: paused;

  }

  .marquee-content{

    display: flex;

    flex-wrap: nowrap;

    white-space: nowrap;

    align-items: center;

    /* 讓每份內容自適應內容寬度 */

    gap: 4rem; /* 每段文字間距 */

    padding-left: 2%; /* 起始間距，可調 */

  }

  .item{

    font-family: "DFKai-SB","標楷體","Microsoft JhengHei", "PingFang TC", serif;

    font-size: var(--font-size);

    line-height: 1;

    white-space: nowrap;

  }

  /* 三種不同顏色（可自行調整）*/

  .color1{ color: #0B5FFF; } /* 藍色 */

  .color2{ color: #E03E2D; } /* 紅色 */

  .color2{ color: #FF8E0E; } /* 紅色 */

  .color3{ color: #008A44; } /* 綠色 */

  /* 動畫：由右向左移動，從 0 到 -50% (即移動一份內容的寬度) */

  @keyframes marquee-move {

    0% { transform: translateX(0); }

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

  }

  /* 響應式調整：小螢幕可減小字體 */

  @media (max-width: 480px) {

    :root { --font-size: 20px; }

  }

</style>

<!-- （可選）無需 JS；若協作平台把 CSS/HTML 分開，可把上面的 style 與 markup 分別放置 -->

<!-- 跑馬燈容器 -->

<div class="marquee-wrapper" aria-live="polite" role="region" aria-label="跑馬燈訊息">

  <div class="marquee">

    <span class="mtext">這是一段跑馬燈示範文字，你可以把這裡換成想顯示的內容。</span>

    <!-- 複製一份內容以達到無縫連續滾動效果 -->

    <span class="mtext">這是一段跑馬燈示範文字，你可以把這裡換成想顯示的內容。</span>

  </div>

</div>

<style>

/* 外框，控制高度與溢出 */

.marquee-wrapper{

  width: 100%;

  overflow: hidden;

  box-sizing: border-box;

  /* 如需置中或調整高度可在此變更 */

}

/* 跑馬燈項目：兩份相同內容用來達成無縫滾動 */

.marquee{

  display: inline-block;

  white-space: nowrap;

  will-change: transform;

  /* 動畫設定：20s、線性、無限重複 */

  animation: marqueeMove 25s linear infinite;

}

/* 單段文字樣式 */

.marquee .mtext{

  display: inline-block;

  margin-right: 3rem; /* 文字之間的間距（可調） */

  font-size: 24px;                /* 字型大小 24 */

  font-family: "標楷體", "DFKai-SB", serif; /* 標楷體為主要字型 */

  color: blue;                    /* 藍色 */

  vertical-align: middle;

}

/* 從右到左：起始在畫面右邊外側 (100%)，結束在左邊外側 (-100%) */

@keyframes marqueeMove {

  0%   { transform: translateX(100%); }

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

}

/*（可選）滑鼠移入暫停 */

.marquee-wrapper:hover .marquee {

  animation-play-state: paused;

}

/* 小螢幕調整範例（非必需） */

@media (max-width: 480px) {

  .marquee .mtext { font-size: 20px; }

}

</style>