使用 HTML 和 CSS 建立無限滾動選取框

為您的網站添加動畫可以使您的網站更具互動性和精彩。實現這一目標的最佳方法之一是創建滾動字幕 - 一種非常時尚的動畫，可以在技能或工具等平滑內容上滑動，使您的網站脫穎而出。

在本教學中，我將向您展示如何僅使用 HTML 和 CSS 建立無限滾動選取框。

什麼是天棚？

滾動字幕是一種簡單的動畫，內容在螢幕上無休止地移動。這可以用來展示技能、技術和功能等文本。

讓我們編碼一下

HTML 結構

先建立html結構

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

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

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

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

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

它是如何運作的

流暢的動畫：

@keyframes 規則指定平滑滾動效果，animation 屬性將其應用於

。

無縫循環：

兩個相同的

部分透過中途開始一個區塊來創造無限滾動的錯覺。

懸停效果：

當您將滑鼠停留在某個項目上時，其背景會變為亮粉紅色 (#f52789)。

客製化您的天棚

更改項目：更新 標籤以顯示您自己的內容，例如服務、工具或推薦。

調整速度：使用--t CSS變數來控制動畫持續時間。值越小，速度越快。

更改顏色：自訂背景和文字顏色以適合您的網站主題。

結論

滾動字幕是一項簡單而強大的功能，可以讓您的網站更具吸引力。本教學將教您如何輕鬆創建適合您的內容和設計偏好的滾動字幕。試試這個。

以上是使用 HTML 和 CSS 建立無限滾動選取框的詳細內容。更多資訊請關注PHP中文網其他相關文章！