CSS數字無縫滾動效果圖,是一種非常實用的網頁效果,可以讓數字一直滾動,展示動態數據或者跑馬燈效果。
.scrolling-num { display: inline-block; /* 讓數字橫向排列 */ white-space: nowrap; /* 防止數字換行 */ overflow: hidden; /* 隱藏超出部分 */ } /* 使用@keyframes定義動畫 */ @keyframes scrolling { from { transform: translateX(0); } to { transform: translateX(-100%); } } .scrolling-num span { display: inline-block; padding: 0 10px; /* 調整數字間距 */ animation: scrolling 10s linear infinite; /* 重復播放動畫 */ }
以上代碼中,我們使用了display:inline-block讓數字橫向排列,white-space:nowrap防止數字換行,overflow:hidden隱藏超出部分。而動畫效果就是使用@keyframes定義動畫,讓數字向左滾動。
為了實現無縫滾動效果,我們可以將數字復制一遍,再使用CSS動畫讓數字無限循環滾動。
HTML代碼如下:
<div class="scrolling-num"><span>123456</span><span>123456</span></div>
在標簽中的文字即為需要滾動的數字,我們復制了一遍數字,讓滾動效果更加平滑。
最后,我們需要調整數字滾動速度和停留時間,只需要調整animation中的10s即可。
使用上述代碼和調整方式,我們就可以輕松實現CSS數字無縫滾動效果圖,為網頁動態展示數據和跑馬燈效果增添魅力。