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