CSS 左右文字飄動是一種很酷炫的效果，可以讓頁面增添一份動感和趣味性。下面我們來一步步學習如何實現這個效果。

/* 首先，我們定義一個容器div，用來承載兩行文字 */
.container {
position: relative;
overflow: hidden;
}
/* 接著，我們分別給左右兩行文字定義樣式 */
.left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
animation: left-to-right 4s ease-in-out infinite;
}
.right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
animation: right-to-left 4s ease-in-out infinite;
}
/* 定義左右文字飄動的動畫 */
@keyframes left-to-right {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
@keyframes right-to-left {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

以上代碼中，我們定義了一個容器div，其中兩行文字分別使用絕對定位進行定位。同時，我們也為左右兩行文字分別定義了動畫效果，通過對transform屬性的變化來實現文字從左往右或從右往左飄動的效果。

最后，我們只需要在html文件中引入樣式表，并在容器div中添加左右兩行文字即可。

左邊的文字會飄動
右邊的文字也會飄動

通過以上步驟，我們就可以實現CSS左右文字飄動的效果了。如果你想增加效果的酷炫程度，可以適當調整動畫的時長和緩動函數。