CSS文字左右滑動是一種常見的效果,它可以讓頁面內容更加豐富多彩。下面我們來看看如何使用CSS實現文字左右滑動的效果。
代碼如下: <div class="container"> <div class="content"> <p>這是要滑動的文字內容</p> </div> </div>
上面的代碼使用了一個div容器來包裹要滑動的文字內容,通過設置容器的寬度和overflow:hidden屬性來限制文字內容的寬度,同時使用CSS3的動畫效果來控制文字的左右滑動。
代碼如下: .container { width: 500px; height: 50px; overflow: hidden; } .content { position: relative; animation: slide 5s infinite; } @keyframes slide { 0% { left: 0; } 50% { left: -500px; } 100% { left: 0; } }
上面的代碼使用了CSS3的動畫效果,通過設置滑動過程的開始位置、結束位置以及滑動時間等參數來控制文字的左右滑動效果。其中,動畫效果的名稱為slide,持續時間為5秒,重復次數為無限次。
通過以上的代碼設置,我們就可以輕松實現CSS文字左右滑動的效果,讓網頁內容更加生動有趣。
下一篇div 部分圓角