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

相关推荐
天天扭码14 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder17 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte21 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang26 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
摆烂为不摆烂2 小时前
😁深入JS(五): 一文让你完全理解 hash 与 history 路由,手写前端路由
前端