代码音画：《又见山里红》

红枫

红枫

这个没用动画库，背景换页用css，小图换页用简易的 js。

蓝魔

欣赏一下，谢谢。

195400

195400

红枫 发表于 2022-9-13 22:37
这个没用动画库，背景换页用css，小图换页用简易的 js。

背景切换方式学习了。

小图切换用的WAAPI （Web Animation API）和css动画类似的js实现，灵活性更好。一些国产浏览器可能不支持，因为它们希望保持兼容flash而不升级支持WAAPI内核。

非常开心

欣赏楼主的新作，点赞多谢分享！

红枫

195400 发表于 2022-9-14 04:57
背景切换方式学习了。

小图切换用的WAAPI （Web Animation API）和css动画类似的js实现，灵活性更好。 ...

其实我也并不怎么懂，也没深入探究过，只是看到一些好样式的音画后分解代码至简极有效，即为我用。小图换页也自己作了
样式添加及改造。
谢谢您的观赏、支持与指导！谢谢老帅！！！

寒冬残荷

红枫 发表于 2022-9-13 22:37
这个没用动画库，背景换页用css，小图换页用简易的 js。

厉害，比动画库的还精彩！可惜就是简易的JS我也学不会。

红枫

寒冬残荷 发表于 2022-9-14 21:27
厉害，比动画库的还精彩！可惜就是简易的JS我也学不会。

小图换页代码若再加上类似如下红码，就可翻滚进出了。

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

红枫

小图换页代码若再加上类似如下红码，就可翻滚进出了。

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


己经加了翻滚进出的换页样式（180deg翻滚）。