在【行者音畫集】里,，我發(fā)表了四帖關(guān)于嫦娥奔月的音畫,，嫦娥的移動(dòng)是利用移動(dòng)標(biāo)簽實(shí)現(xiàn)的,，這就注定會(huì)有很多不足,，嫦娥圖由近漸遠(yuǎn)，大小不變,，清晰度不變,，使得畫面缺少立體感，不具有空間效果,。另外,，嫦娥的移動(dòng)軌跡也受局限。用移動(dòng)標(biāo)簽制作顯然難盡如人意,。下面,，使用css樣式制作就好多了，縮放屬性,，透明度屬性的運(yùn)用明顯會(huì)增強(qiáng)畫面的透視效果,。嫦娥圖的移動(dòng)軌跡也很隨意，不局限在垂直上升或45°上升,，這比f(wàn)lash的引導(dǎo)層優(yōu)越得多,。別說(shuō)太遠(yuǎn)了，看看下圖的效果吧,！

       代碼：

＜p align="center"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/2220/252494498_1_20220922082935585.gif" /＞
＜style type="text/css"＞.動(dòng)畫{
position: absolute;
height: 420px; width: 540px;
left: 200px; top: 250px;
animation-name: 飛;
animation-delay: 0.2s;/*延遲時(shí)間*/
animation-iteration-count:infinite ;/*循環(huán)次數(shù)*/
animation-duration: 30s;/*動(dòng)畫一個(gè)周期的持續(xù)時(shí)間*/ }
@keyframes 飛 {
0%{ opacity: 1; transform:translate(85%,272%) scale(1.0)}
100% { opacity:0.1; transform:translate(0%,180%) scale(0.1) }
＜/style＞
＜div class="動(dòng)畫"＞
＜img src="http://image109.360doc.com/DownloadImg/2022/09/2220/252494498_2_20220922082936710.png" style="width: 400px; height: 300px;" /＞
＜/div＞

       代碼解析：

       括號(hào)中有兩個(gè)百分?jǐn)?shù),，前者水平定位，后者垂直定位,?？梢哉祷蜇?fù)值。：

       透明度 opacity 選值范圍： 0-1.0 值越小越透明,。

       縮放倍率（值小于1則收縮）,。

       大部分都已在代碼中注釋，此不再贅,。