今天要介紹的是如何在漸變框架中創建一個文字滑動效果，並透過 CSS 動畫讓文字在框架中從左到右滑動

HTML

創建一個包裹文字的框架（text-wrapper），並在框架內放置了可滑動的文字內容（text-slide）

<div class="text-wrapper">
    <div class="text-slide">Hello Welcome!</div>
</div>

CSS

1. 設定整個頁面的樣式

使用 flexbox 將內容垂直和水平置中，讓字體效果居中顯示，以及使用 height 調整視窗高度

body {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f0f0f0;
}

2. 漸變框架樣式

設置框架的寬度與高度，讓字體置中，並應用線性漸變背景

.text-wrapper {
   width: 300px;
   height: 50px;
   background: linear-gradient(135deg, #ff7e5f, #feb47b); 
   border-radius: 10px;
   padding: 5px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   display: flex;
   justify-content: center;
   align-items: center; 
}

• border-radius : 創建框架為圓角效果
• overflow : 隱藏任何超出框架的部分，確保滑動的文字在邊界外消失
• box-shadow : 添加陰影，讓框架看起來更具立體感

3. 漸變邊框效果

在 ::before 偽元素的框架周圍創建一個漸變邊框，並通過 linear-gradient 設置顏色變化，讓框架邊界看起來更豐富和生動

.text-wrapper::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 10px;
   padding: 2px;
   background: linear-gradient(45deg, #ff6a00, #ee0979); 
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}

• -webkit-mask 和 mask : 限制背景僅顯示在邊框部分，內部區域保持透明

4. 文字樣式

.text-slide {
   font-size: 24px;
   white-space: nowrap; 
   animation: slideText 5s linear infinite;
   color: #fff; 
}

• white-space : nowrap : 讓文字不換行，確保文字在框架內進行滑動
• animation : 使用 slide 控制文字的滑動，動畫時間為 5 秒且無限循環

5. 文字滑動動畫

利用 @keyframes 定義文字滑動動畫

@keyframes slideText {
   0% {
       transform: translateX(-100%); 
   }
   50% {
       transform: translateX(0);
   }
   100% {
       transform: translateX(100%);
   }
}

• 0% : 文字從框架外的左邊進入
• 50% : 文字完全進入框架，位於正中間
• 100% : 文字滑出框架右側，模擬連續滑動的效果

結果呈現