代碼音畫：《又見山里紅》

紅楓

紅楓

這個(gè)沒用動(dòng)畫庫，背景換頁用css，小圖換頁用簡易的 js。

藍(lán)魔

欣賞一下，謝謝。

195400

195400

紅楓 發(fā)表于 2022-9-13 22:37
這個(gè)沒用動(dòng)畫庫，背景換頁用css，小圖換頁用簡易的 js。

背景切換方式學(xué)習(xí)了。

小圖切換用的WAAPI （Web Animation API）和css動(dòng)畫類似的js實(shí)現(xiàn)，靈活性更好。一些國產(chǎn)瀏覽器可能不支持，因?yàn)樗鼈兿Ｍ�保持兼容flash而不升級(jí)支持WAAPI內(nèi)核。

非常開心

欣賞樓主的新作，點(diǎn)贊多謝分享！

紅楓

195400 發(fā)表于 2022-9-14 04:57
背景切換方式學(xué)習(xí)了。

小圖切換用的WAAPI （Web Animation API）和css動(dòng)畫類似的js實(shí)現(xiàn)，靈活性更好。 ...

其實(shí)我也并不怎么懂，也沒深入探究過，只是看到一些好樣式的音畫后分解代碼至簡極有效，即為我用。小圖換頁也自己作了
樣式添加及改造。
謝謝您的觀賞、支持與指導(dǎo)！謝謝老帥�。�！

寒冬殘荷

紅楓 發(fā)表于 2022-9-13 22:37
這個(gè)沒用動(dòng)畫庫，背景換頁用css，小圖換頁用簡易的 js。

厲害，比動(dòng)畫庫的還精彩！可惜就是簡易的JS我也學(xué)不會(huì)。

紅楓

寒冬殘荷 發(fā)表于 2022-9-14 21:27
厲害，比動(dòng)畫庫的還精彩！可惜就是簡易的JS我也學(xué)不會(huì)。

小圖換頁代碼若再加上類似如下紅碼，就可翻滾進(jìn)出了。

let aniAr = [
                [ { transform: 'translateX(-150%) rotateX(360deg)' }, { transform: 'translateX(0)' } ],
                [ { transform: 'translateY(0) rotateY(360deg)' }, { transform: 'translateY(-150%)' } ]，

紅楓

小圖換頁代碼若再加上類似如下紅碼，就可翻滾進(jìn)出了。

let aniAr = [
                [ { transform: 'translateX(-150%) rotateX(360deg)' }, { transform: 'translateX(0)' } ],
                [ { transform: 'translateY(0) rotateY(360deg)' }, { transform: 'translateY(-150%)' } ],


己經(jīng)加了翻滾進(jìn)出的換頁樣式（180deg翻滾）。