自学内容网 自学内容网

纯CSS实现文本或表格特效(连续滚动与首尾相连)

纯CSS实现文本连续向左滚动首尾相连

1.效果图:
在这里插入图片描述

2.实现代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纯CSS实现文本连续向左滚动首尾相连</title>

    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      #wrap {
        overflow: hidden;
        position: relative;
        width: 600px;
        height: 20px;
        padding-bottom: 5px;
        border-bottom: 1px solid #cccccc;
        white-space: nowrap;
      }

      #slide {
        position: absolute;
        animation: slide 10s linear infinite;
      }

      @keyframes slide {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="slide">
        <span>111四季宛如一首无声的诗,一幅流动的画,在时光的长河中悄然流转,各自绽放着独特的魅力。</span>
        <span>111四季宛如一首无声的诗,一幅流动的画,在时光的长河中悄然流转,各自绽放着独特的魅力。</span>
      </div>
    </div>
  </body>
</html>

3.关键代码:

#wrap white-space: nowrap;
在这里插入图片描述

#slide animation: slide 10s linear infinite; 在这里插入图片描述

纯CSS实现表格连续向下滚动首尾相连

1.效果图:
在这里插入图片描述

2.实现代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>纯CSS实现表格连续向下滚动首尾相连</title>

    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      #wrap {
        overflow: hidden;
        position: relative;
        width: 500px;
        height: 80px;
        padding-bottom: 5px;
        border-bottom: 1px solid #cccccc;
     
      }
  .MyTable{
 width: 100%;
         height: 100%;
}
      #slide {
        position: absolute;
        animation: slide 3s linear infinite;
      }

      @keyframes slide {
        0% {
          transform: translateY(-50%);
        }
        100% {
          transform: translateY(0);
        }
      }

    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="slide">
<table class="MyTable">
  <thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
  <th>Column 6</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>Data 1</td>
  <td>Data 2</td>
  <td>Data 3</td>
  <td>Data 11</td>
  <td>Data 21</td>
  <td>Data 31</td>
</tr>
<tr>
  <td>Data 4</td>
  <td>Data 5</td>
  <td>Data 6</td>
  <td>Data 41</td>
  <td>Data 51</td>
  <td>Data 61</td>
</tr>
  </tbody>
</table>
<table  class="MyTable">
  <thead>
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th>Column 4</th>
  <th>Column 5</th>
  <th>Column 6</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>Data 1</td>
  <td>Data 2</td>
  <td>Data 3</td>
  <td>Data 11</td>
  <td>Data 21</td>
  <td>Data 31</td>
</tr>
<tr>
  <td>Data 4</td>
  <td>Data 5</td>
  <td>Data 6</td>
  <td>Data 41</td>
  <td>Data 51</td>
  <td>Data 61</td>
</tr>
  </tbody>
</table>
      </div>
    </div>
  </body>
</html>

3.关键代码:

#wrap height: 80px;
#slide animation: slide 3s linear infinite;

由于是想下滚动所以需要控制高度为一个table高度.

以上代码可以直接复制到菜鸟教程运行验证

gif制作工具


原文地址:https://blog.csdn.net/qq_16771097/article/details/144435757

免责声明:本站文章内容转载自网络资源,如侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!