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

相关推荐
南囝coding15 小时前
Claude Code 插件系统来了
前端·后端·程序员
摇滚侠15 小时前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack15 小时前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
亮子AI15 小时前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u16 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士16 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱16 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
蒙特卡洛的随机游走16 小时前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家952716 小时前
QT-常用控件(多元素控件)
开发语言·前端·qt
葱头的故事16 小时前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript