.字幕 {
position: relative;
width: 200px;
height: 200px;
.字幕 span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: 滾動 1s infinite;
.字幕 span:nth-child(1) {
animation-duration: 1s;
animation-iteration-count: infinite;
.字幕 span:nth-child(2) {
animation-duration: 1.5s;
animation-iteration-count: infinite;
.字幕 span:nth-child(3) {
animation-duration: 2s;
animation-iteration-count: infinite;
@keyframes 滾動 {
0% {
transform: translate(0, 0);
100% {
transform: translate(0, 200px);
CSS多條字幕滾動是一種常用的網頁設計技術,可以讓網頁上顯示多條字幕,并且在滾動時自動顯示和隱藏。該技術使用CSS控制字幕的樣式和位置,并且可以設置字幕的數量和滾動速度。
下面是一個簡單的CSS多條字幕滾動示例:
```html
這是第一行字幕
這是第二行字幕
這是第三行字幕
這是第一行字幕
這是第二行字幕
這是第三行字幕
這是第一行字幕
這是第二行字幕
這是第三行字幕
.字幕 {
position: relative;
width: 200px;
height: 200px;
.字幕 span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: 滾動 1s infinite;
.字幕 span:nth-child(1) {
animation-duration: 1s;
animation-iteration-count: infinite;
.字幕 span:nth-child(2) {
animation-duration: 1.5s;
animation-iteration-count: infinite;
.字幕 span:nth-child(3) {
animation-duration: 2s;
animation-iteration-count: infinite;
@keyframes 滾動 {
0% {
transform: translate(0, 0);
100% {
transform: translate(0, 200px);
在上面的示例中,我們使用CSS的`position: relative`屬性將字幕的div容器定位在頁面上,使用`position: absolute`屬性將字幕的`span`元素定位在容器內。然后,我們使用`display: block`屬性將字幕的`span`元素設置為可見,并使用`position: absolute`屬性將其定位在頁面的頂部和底部。
接著,我們使用CSS的`animation`屬性設置字幕的滾動效果,設置每個`span`元素在滾動到底部時的樣式,以及在滾動到頂部時的樣式。
CSS多條字幕滾動技術可以讓網頁設計更加靈活,并且可以根據不同的需求進行自定義和調整。