Create a Infinite Scrolling Marquee with HTML and CSS

为您的网站添加动画可以让您的网站更具互动性和精彩。实现这一目标的最佳方法之一是创建滚动字幕 - 一种非常时尚的动画，可以在技能或工具等平滑内容上滑动，使您的网站脱颖而出。

在本教程中，我将向您展示如何仅使用 html 和 css 创建无限滚动选取框。

什么是天棚？

滚动字幕是一种简单的动画，内容在屏幕上无休止地移动。这可以用来展示技能、技术和功能等文本。

让我们编码一下

html 结构

立即学习“前端免费学习笔记（深入）”；

首先创建html结构

    

      html
      css
      javascript
      react js
      node js
      sql
      git
      aws
      azure
    
    

      html
      css
      javascript
      react js
      node js
      sql
      git
      aws
      azure
    
  

  

    

      typescript
      redux
      bootstrap
      material ui
      tailwind
      scss
      webpack
      babel
      npm
      jenkins
    
    

      typescript
      redux
      bootstrap
      material ui
      tailwind
      scss
      webpack
      babel
      npm
      jenkins
    
  

  

    

      rest api
      docker
      linux
      seo
      agile methedology
      jira
      sdlc
    
    

      rest api
      docker
      linux
      seo
      agile methedology
      jira
      sdlc
    
  

每个块都包含一个技能或物品，两个相同的块确保连续滚动。

css

现在添加滚动的 css 样式

* {
    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 属性将其应用于

人民网AIGC-X

国内科研机构联合推出的AI生成内容检测工具

下载

无缝循环：

两个相同的

悬停效果：

当您将鼠标悬停在某个项目上时，其背景会变为亮粉色 (#f52789)。

定制您的天棚

更改项目：更新 标签以显示您自己的内容，例如服务、工具或推荐。

调整速度：使用--t css变量来控制动画持续时间。值越小，速度越快。

更改颜色：自定义背景和文本颜色以适合您网站上的主题。

结论

滚动字幕是一项简单而强大的功能，可以让您的网站引人入胜。本教程将教您如何轻松创建适合您的内容和设计偏好的滚动字幕。试试这个。