当前位置：首页 > 文章列表 > 文章 > 前端 > Create a Infinite Scrolling Marquee with HTML and CSS

Create a Infinite Scrolling Marquee with HTML and CSS

来源：dev.to 2024-12-24 18:48:49 0浏览收藏

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