CSS字幕滾動是一種常用于網頁上展示公告、新聞、廣告等內容的效果,它可以讓文字在屏幕上不斷地滾動,在視覺上具有強烈的吸引力。但是有時候我們希望能夠在字幕滾動的過程中暫停,以方便用戶更好地閱讀內容。那么,該如何實現CSS字幕滾動再暫停效果呢?接下來我們將通過代碼示例來解答這個問題。
/* CSS代碼 */ .marquee { width: 100%; /* 設置字幕容器寬度 */ height: 40px; /* 設置字幕容器高度 */ overflow: hidden; /* 隱藏溢出部分 */ position: relative; /* 設置字幕容器相對定位 */ } .marquee p { position: absolute; /* 設置滾動的文字相對定位 */ left: 0; /* 水平方向從0開始滾動 */ top: 0; /* 垂直方向從0開始 */ white-space: nowrap; /* 防止文字換行 */ animation: marquee-scroll 10s linear infinite; /* 設置滾動動畫 */ } @keyframes marquee-scroll { from { transform: translateX(0); /* 初始位置 */ } to { transform: translateX(-100%); /* 滾動到左側 */ } } /* 點擊暫停樣式 */ .marquee:hover p { animation-play-state: paused; /* 鼠標移入時暫停滾動 */ }
以上是實現CSS字幕滾動再暫停效果的代碼示例。其中,我們使用了動畫animation屬性來控制文字滾動的速度和時間,滾動的距離通過translateX()方法來實現。而暫停功能則是通過鼠標移入容器,觸發:hover偽類的樣式,使用animation-play-state屬性來實現的。
除此之外,我們還可以通過JavaScript代碼來實現更復雜的字幕滾動操作,例如點擊播放、暫停按鈕等。在實際的網頁制作中,需要根據具體的需求來選擇適合的方案。