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

ops/2024/12/19 1:23:44/

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


http://www.ppmy.cn/ops/143043.html

相关文章

中阳科技:量化交易模型的探索与发展前景

在数字化浪潮的推动下&#xff0c;金融市场迎来了一场技术革命。量化交易作为融合金融与科技的产物&#xff0c;正在全球范围内深刻改变交易方式和市场格局。中阳科技通过不断优化量化模型和算法技术&#xff0c;正在引领智能化交易的新方向。 量化交易的核心概念 量化交易是…

关于linux的ld.so.conf.d

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

linux网络编程 | c | 多进程并发服务器实现

多进程并发服务器 基于该视频完成 11-多进程并发服务器思路分析_哔哩哔哩_bilibili 通过的是非阻塞忙轮询的方式实现的 和阻塞等待的区别就是&#xff0c;阻塞是真的阻塞了&#xff0c;而这个方式是一直在问有没有请求有没有请求 文章目录 多进程并发服务器1.核心思路&…

Git Push冲突怎么办

发生情况 在团队开发时&#xff0c;都没有pull&#xff0c;直接在同一个文件进行修改并push&#xff0c;后push的那个人就会出现冲突的情况 解决方法 在冲突后&#xff0c;首先merge&#xff0c;然后可以选择Accpet theirs, Accept yours, Merge Accpet theirs 去除自己的代…

mysql,数据库和表的核心语句

一.库操作1.创建库create database if not exists 库名 default 字符集 default 校对规则2.删除库drop database if exists 库名3.修改库的,字符集,校对规则alter databse 库名 default 字符集 default 校对规则4.查看当前使用的库seclect databse();5.查看库show databases;…

人工智能浪潮来袭:2024年技术革命与产业变革深度解析@附64页PDF文件下载

随着2024年的到来&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度、广度和深度改变着我们的生产和生活方式。在这篇深度解析中&#xff0c;我们将带您一探AI技术的最新发展、产业应用的现状以及未来的安全治理趋势。 技术革命&#xff1a;AI技术的新范…

C#--异常

异常与异常处理机制 • 异常是指程序运行期间产生的错误。异常会导致运行程序提前终止。 • 异常处理机制是用于处理异常的一种结构化方法。  基本思想是将异常的检测与处理分离。 当在一个函数体中检到异常条件 存在&#xff0c;但无法确定相应的处理方法时&#xff0c;…

nVisual 前端集成SDK使用说明

目前客户需要搭建自己的可视化产品,但需要使用nVisual的可视化视图功能,根据目前项目实施需求,决定做了一款简单版的SDK视图插件,这个小插件的主要功能是嵌入到客户项目里给客户提供 ‘详细视图’‘拓扑视图’或者是‘主视图’的展示功能.目前已经开发完毕,这里做一下简单介绍.…