纯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>