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

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

1.效果图：

2.实现代码：

kotlin 复制代码

<!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.实现代码：

kotlin 复制代码

<!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制作工具