中畫網

標題: 代碼音畫：《又見山里紅》 [打印本頁]

作者: 紅楓 時間: 2022-9-13 22:30
標題: 代碼音畫：《又見山里紅》

作者: 紅楓 時間: 2022-9-13 22:37
這個沒用動畫庫，背景換頁用css，小圖換頁用簡易的 js。

作者: 藍魔 時間: 2022-9-13 23:58
欣賞一下，謝謝。

作者: 195400 時間: 2022-9-14 04:39

作者: 195400 時間: 2022-9-14 04:57

紅楓發表于 2022-9-13 22:37
這個沒用動畫庫，背景換頁用css，小圖換頁用簡易的 js。

背景切換方式學習了。

小圖切換用的WAAPI （Web Animation API）和css動畫類似的js實現，靈活性更好。一些國產瀏覽器可能不支持，因為它們希望保持兼容flash而不升級支持WAAPI內核。

作者: 非常開心 時間: 2022-9-14 06:58
欣賞樓主的新作，點贊

多謝分享！

作者: 紅楓 時間: 2022-9-14 07:00

195400 發表于 2022-9-14 04:57
背景切換方式學習了。

小圖切換用的WAAPI （Web Animation API）和css動畫類似的js實現，靈活性更好。 ...

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

作者: 寒冬殘荷 時間: 2022-9-14 21:27

紅楓發表于 2022-9-13 22:37
這個沒用動畫庫，背景換頁用css，小圖換頁用簡易的 js。

厲害，比動畫庫的還精彩！可惜就是簡易的JS我也學不會。

作者: 紅楓 時間: 2022-9-15 13:40

寒冬殘荷發表于 2022-9-14 21:27
厲害，比動畫庫的還精彩！可惜就是簡易的JS我也學不會。

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

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

作者: 紅楓 時間: 2022-9-16 19:47
小圖換頁代碼若再加上類似如下紅碼，就可翻滾進出了。

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

己經加了翻滾進出的換頁樣式（180deg翻滾）。

作者: 195400 時間: 2022-9-16 20:40

紅楓發表于 2022-9-16 19:47
小圖換頁代碼若再加上類似如下紅碼，就可翻滾進出了。

let aniAr = [

再來個rotateZ看看是個什么花樣

作者: 紅楓 時間: 2022-9-17 07:25

195400 發表于 2022-9-16 20:40
再來個rotateZ看看是個什么花樣

感覺此小圖換頁程式相對而言簡便可控，可隨需隨編隨改。

作者: 195400 時間: 2022-9-17 08:22

紅楓發表于 2022-9-17 07:25
感覺此小圖換頁程式相對而言簡便可控，可隨需隨編隨改。

自己寫的比別人寫的增刪起來肯定要容易些。

作者: 紅楓 時間: 2022-9-22 08:59

測試一下視頻的效果如何。

作者: 寒冬殘荷 時間: 2022-9-23 07:37

紅楓發表于 2022-9-22 08:59
測試一下視頻的效果如何。

欣賞了，點贊！視頻是錄屏的？若是錄屏，視頻中的美女是視頻編輯加入的還是原代碼加上的？

作者: 飄絮飛影 時間: 2022-9-25 16:57
能聽，看不到了~

作者: 相約愛晚亭 時間: 2022-10-10 10:03
欣賞音畫佳作！紅楓老師活學活用代碼，真行！

歡迎光臨中畫網 (http://www.nujv.cn/)