当前位置：首页 > 文章列表 > 文章 > 前端 > 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浏览收藏

什么是天棚？

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

让我们编码一下

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;
  }