CSS3是前端開(kāi)發(fā)中非常重要的技術(shù)，它不僅可以用來(lái)布局和美化網(wǎng)頁(yè)，還可以實(shí)現(xiàn)豐富的動(dòng)畫(huà)效果，比如制作圖片從無(wú)到有的效果。

/*CSS樣式代碼*/
/*設(shè)置默認(rèn)狀態(tài)下的圖片透明度為0*/
img{
opacity: 0;
}
/*設(shè)置動(dòng)畫(huà)效果*/
img.show{
-webkit-animation-name: fadeIn;  /* Safari and Chrome */
-webkit-animation-duration: 2s;
animation-name: fadeIn;
animation-duration: 2s;
}
/*定義動(dòng)畫(huà)幀*/
@-webkit-keyframes fadeIn {  /* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

首先，我們需要設(shè)置圖片的默認(rèn)狀態(tài)下的透明度為0，這樣圖片就不會(huì)在頁(yè)面中顯示。然后，我們用CSS定義一個(gè)動(dòng)畫(huà)效果，這里定義的是圖片淡入的效果，即從無(wú)到有。

接下來(lái)，我們需要定義動(dòng)畫(huà)幀，這個(gè)過(guò)程實(shí)際上就是定義動(dòng)畫(huà)的具體效果。我們使用@keyframes定義動(dòng)畫(huà)幀，其中from表示動(dòng)畫(huà)開(kāi)始時(shí)的狀態(tài)，to表示動(dòng)畫(huà)結(jié)束時(shí)的狀態(tài)。這里我們定義了兩個(gè)動(dòng)畫(huà)幀，一個(gè)是針對(duì)Safari和Chrome瀏覽器的，另一個(gè)是針對(duì)其他瀏覽器的。

最后，我們需要在HTML代碼中使用JavaScript來(lái)觸發(fā)動(dòng)畫(huà)。例如：

<img src="image.jpg" alt="" onclick="this.classList.add('show')">

當(dāng)用戶(hù)點(diǎn)擊圖片時(shí)，JavaScript會(huì)將圖片的class屬性設(shè)置為show，從而觸發(fā)動(dòng)畫(huà)效果。這樣，用戶(hù)就可以看到圖片從無(wú)到有的過(guò)程了。