Create a Infinite Scrolling Marquee with HTML and CSS

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《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 属性将其应用于

无缝循环：

两个相同的

悬停效果：

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

定制您的天棚

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

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

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

结论

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

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