CSS中的窗口變小橫排擠效果可以讓網站頁面更具有動態感，增強用戶體驗。

實現這種效果的方法是利用CSS3中的Transform和Transition屬性，將元素從一個位置平滑地移動到另一個位置。

/* 設置容器樣式 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 定義橫向的卡片樣式 */
.card {
width: 300px;
height: 200px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #ccc;
transform: translateX(0);
transition: transform 0.3s ease-out;
}
/* 鼠標懸停時移動卡片位置 */
.card:hover {
transform: translateX(-50px);
}

以上代碼中，通過設置容器的display為flex和flex-wrap為wrap，可以讓卡片元素橫向排列并自動換行。

卡片元素的樣式設置了固定的寬度和高度，并設置了margin-right和margin-bottom為20px，以便控制元素之間的間距。

transform屬性的translateX函數可以將元素沿著水平方向平移，而transition屬性可以讓元素的移動過程變得平滑。

當鼠標懸停在卡片元素上時，通過將卡片元素的transform屬性值設置為-50px，可以讓元素向左移動50px。

這種效果可以讓網站頁面更具有活力，增加用戶的互動體驗。