红枫 发表于 2022-9-13 22:30

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

<DIV style="POSITION: relative; WIDTH: 1200px; TOP: 10px; LEFT: -50px"><IFRAME height=700 marginHeight=0 src="http://pan.yinhuabbs.cn/view.php/75819082376bb4ced42c3b550b0b00bf.html" frameBorder=0 width=1100 marginWidth=0 scrolling=no></IFRAME></DIV>

红枫 发表于 2022-9-13 22:37

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

蓝魔 发表于 2022-9-13 23:58

欣赏一下，谢谢。

195400 发表于 2022-9-14 04:39

http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif

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。

{:1_293:}{:1_293:}{:1_293:}厉害，比动画库的还精彩！可惜就是简易的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翻滚）。
页: [1] 2
查看完整版本: 代码音画：《又见山里红》