CSS3技術可以為手機網頁設計帶來更豐富的交互效果，滾動圖是其中一種比較常用的交互方式。本文將介紹如何使用CSS3實現手機滾動圖。

首先，在HTML頁面中需要定義一個容器來裝載滾動圖片。例如：

<div class="scrollImg">
<ul class="imgList">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
<li><img src="img4.jpg"></li>
</ul>
</div>

上述代碼中，div元素中的scrollImg是容器的類名，而ul元素中的imgList則表示滾動圖片列表。接下來，我們需要為這個容器設置CSS樣式：

.scrollImg {
position: relative;
overflow: hidden;
}
.scrollImg .imgList {
list-style: none;
position: absolute;
top: 0px;
left: 0px;
}
.scrollImg .imgList li {
float: left;
}

上述樣式將容器的overflow屬性設置為hidden，這可以隱藏多余的圖片內容。而ul元素的top和left屬性被設置為0，表示列表的起始位置是容器的左上角。最后，li元素使用float屬性讓每個圖片可以在同一行內排列。

接下來，我們需要使用CSS3中的動畫效果來讓圖片滾動起來。具體實現代碼如下：

.scrollImg .imgList li {
animation: scrollImage 15s linear infinite;
-moz-animation: scrollImage 15s linear infinite; /* Firefox */
-webkit-animation: scrollImage 15s linear infinite; /* Safari and Chrome */
}
@keyframes scrollImage{
0% {
opacity: 1;
transform: translateX(0);
}
18.33% {
opacity: 1;
transform: translateX(0);
}
24.99% {
opacity: 0;
transform: translateX(100%);
}
43.32% {
opacity: 0;
transform: translateX(100%);
}
49.98% {
opacity: 1;
transform: translateX(0);
}
68.31% {
opacity: 1;
transform: translateX(0);
}
74.98% {
opacity: 0;
transform: translateX(-100%);
}
93.31% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

上述代碼定義了關鍵幀keyframes滾動動畫，animation屬性則將其應用到li元素上，從而實現了圖片的滾動效果。

通過以上步驟，CSS3技術成功實現了手機滾動圖的效果。設計人員只需要修改容器的class名、圖片列表及動畫效果，就可以自由實現不同的滾動效果，從而提高手機網頁的交互性。