Create a Infinite Scrolling Marquee with HTML and CSS

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Create a Infinite Scrolling Marquee with HTML and CSS》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

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

什么是天棚？

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

让我们编码一下

html 结构

首先创建html结构

<div class="scroll" style="--t:20s">
    <div>
      <span>html</span>
      <span>css</span>
      <span>javascript</span>
      <span>react js</span>
      <span>node js</span>
      <span>sql</span>
      <span>git</span>
      <span>aws</span>
      <span>azure</span>
    </div>
    <div>
      <span>html</span>
      <span>css</span>
      <span>javascript</span>
      <span>react js</span>
      <span>node js</span>
      <span>sql</span>
      <span>git</span>
      <span>aws</span>
      <span>azure</span>
    </div>
  </div>

  <div class="scroll" style="--t:15s">
    <div>
      <span>typescript</span>
      <span>redux</span>
      <span>bootstrap</span>
      <span>material ui</span>
      <span>tailwind</span>
      <span>scss</span>
      <span>webpack</span>
      <span>babel</span>
      <span>npm</span>
      <span>jenkins</span>
    </div>
    <div>
      <span>typescript</span>
      <span>redux</span>
      <span>bootstrap</span>
      <span>material ui</span>
      <span>tailwind</span>
      <span>scss</span>
      <span>webpack</span>
      <span>babel</span>
      <span>npm</span>
      <span>jenkins</span>
    </div>
  </div>

  <div class="scroll" style="--t:15s">
    <div>
      <span>rest api</span>
      <span>docker</span>
      <span>linux</span>
      <span>seo</span>
      <span>agile methedology</span>
      <span>jira</span>
      <span>sdlc</span>
    </div>
    <div>
      <span>rest api</span>
      <span>docker</span>
      <span>linux</span>
      <span>seo</span>
      <span>agile methedology</span>
      <span>jira</span>
      <span>sdlc</span>
    </div>
  </div>

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

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

无缝循环：

两个相同的

悬停效果：

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

定制您的天棚

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

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

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

结论

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

到这里，我们也就讲完了《Create a Infinite Scrolling Marquee with HTML and CSS》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！