CSS提示文字上下滾動是一個經常在網頁設計中用到的效果。它可以增強網頁的交互性和視覺效果,讓頁面更加吸引人。
代碼示例: /* 在 CSS 中定義提示文字上下滾動的效果 */ .scroll { overflow: hidden; /* 隱藏超過容器寬高的內容 */ height: 40px; /* 設置容器高度 */ } .scroll p { animation: scroll 5s infinite; /* 添加動畫效果 */ } @keyframes scroll { 0% { transform: translateY(0); /* 初始位置 */ } 100% { transform: translateY(-100%); /* 結束位置 */ } }
上面的代碼示例中,我們在 CSS 中定義了一個名為.scroll的容器,并設置了其高度和overflow屬性。在.scroll內部,我們定義了一個p標簽,用于包裝需要滾動的提示文字,并添加了一個名為scroll的動畫,其持續時間為5秒并無限循環。
通過以上代碼,在網頁中就可以輕松實現提示文字上下滾動的效果了。同時,我們也可以通過調整高度和動畫持續時間等屬性,來實現不同的滾動效果。
上一篇css表格放在背景圖上面
下一篇css搜索框邊緣虛化