在網頁設計中，滾動圖可以為網頁增添動態感，提高用戶的視覺體驗。家在滾動圖是一款基于CSS的滾動圖代碼，它支持多屏滾動，不僅可以呈現出不同的圖片和文字，還可以給用戶帶來炫酷的視覺效果。

以下是家在滾動圖的CSS源代碼：

/* 設置滾動圖的尺寸 */
.scroll-container {
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
/* 設置圖片和文字的位置 */
.scroll-item {
width: 100%;
height: 500px;
position: absolute;
}
/* 設置多屏滾動的效果 */
.scroll-item:nth-child(1) {
top: 0;
left: 0;
animation: scrollX 30s infinite linear;
}
.scroll-item:nth-child(2) {
top: 0;
left: 100%;
animation: scrollX 30s infinite linear;
}
.scroll-item:nth-child(3) {
top: 0;
left: 200%;
animation: scrollX 30s infinite linear;
}
/* 動畫效果設置 */
@keyframes scrollX {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 設置圖片和文字的樣式 */
.scroll-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.scroll-item h1 {
font-size: 3rem;
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.scroll-item p {
font-size: 1.5rem;
color: #fff;
position: absolute;
top: 70%;
transform: translateY(-50%);
text-align: center;
}

以上是家在滾動圖的CSS源代碼，通過調整CSS代碼中的參數，可以實現不同的滾動圖效果。家在滾動圖不僅使用簡單，也具有良好的兼容性，可以在多種不同的設備上呈現出相同的效果。