CSS中有很多方式來創建不同類型的文字滾動效果。下面介紹一些最流行的方法。

/* 第一種：垂直滾動 */
.marquee {
height: 50px; /* 可根據需要調整高度 */
overflow: hidden; /* 隱藏溢出內容 */
}
.marquee p {
display: inline; /* 內容顯示為行內元素 */
float: left; /* 使多個p元素整體左浮動 */
width: 50%;
padding-right: 50%; /* 兩個p元素距離為頁面寬度的一半 */
text-align: center; /* 居中文字 */
animation: marquee infinite 10s linear;
}
/* 無縫滾動動畫 */
@keyframes marquee {
0% {transform: translate(0, 0);}
100% {transform: translate(0, -100%);}
}

上述代碼可以創建一個垂直滾動的效果，其中的關鍵是通過讓兩個p元素一起左浮動實現內容組合。此外，動畫效果是通過translate屬性實現的。當第一個p完全消失時，第二個p即開始跟隨第一個p一起向上移動，形成一種無縫滾動的效果。

/* 第二種：水平滾動 */
.marquee {
white-space: nowrap; /* 防止換行 */
overflow: hidden;
}
.marquee p {
display: inline-block; /* 放置多個p元素 */
margin: 0 50px; /* 兩個p元素之間的距離 */
animation: marquee 10s linear infinite;
}
/* 無縫滾動動畫 */
@keyframes marquee {
0% {transform: translate(0, 0);}
100% {transform: translate(-100%, 0);}
}

上述代碼可以實現水平滾動的效果。基本原理是通過white-space屬性禁止內容換行，并為多個p元素設置display屬性為inline-block，讓它們相互并排坐在一起。動畫效果同樣是通過translate屬性實現的。

/* 第三種：漸隱漸出 */
.marquee {
height: 50px;
overflow: hidden;
}
.marquee p {
animation: fade 10s linear infinite;
}
/* 漸隱漸出動畫 */
@keyframes fade {
0% {opacity: 1;}
50% {opacity: 0.5;}
100% {opacity: 1;}
}

上述代碼可以實現一種利用漸隱漸出的方式在顯示不同內容。動畫效果是通過opacity屬性的變化實現的。使用該方法時要注意為.marquee元素指定固定高度，并使內部p元素完全填充該高度。

以上是三種實現文字滾動效果的方法。實際上，還有很多其他的方式可以實現該效果，但這三種應該是最常用的方法。