动态壁纸+看板娘

关于动态壁纸+看板娘的折腾,因为喜欢看板娘,之前就做了一个静态壁纸加看板娘网页,用wallpaper成功把看板娘放养在了电脑桌面,并分享在了哔哩哔哩

壁纸是bing的每日壁纸,每天自动更换一张精美的壁纸
如下图



今天突然看到一个有趣的评论,问我能不能把动态壁纸也加上看板娘?这个想法真是太有趣了,真香!


话不多说,搞起

首先去百度一下视频怎么做网页背景(我太菜了 :meng: ),学习到网页视频背景都是用video来做的。用发也比较简单,设置视频路径src和一些参数(视频自适应、自动播放、循环播放等),在加上之前做的看板娘就完成了 φ( ̄∇ ̄o)

然后就是把做好的网站地址放到wallpaper上去了,结果显示白屏 >﹏< 浏览器上是一切正常的
和小伙伴一起讨论(其实是请教  ̄﹃ ̄ )才知道原来是wallpaper不支持视频格式,不支持那就换视频格式呗,刚开始换的是GIF格式,因为好像gif是最接近图片的格式了,结果是成功了,但是画质太垃圾放弃了,后来通过把其他使用视频做背景的网页测试发现,wallpaper是可以支持webm的视频格式,把原来的视频全部转换成webm格式就可以了

壁纸优化

刚开始就设置了一个视频作为网页背景,使用了一会感觉一个视频比较无聊,就想能不能做一个随机的东西,让我每次打开网页都是不一样的动态壁纸(虽然我也不太会 (╯°A°)╯︵○○○ )
咨询小伙伴说是引用js可以做到,然后开始百度搜索js随机背景,根据一个大佬发的随机的网页背景图片慢慢改过来我需要的随机视频背景。

每次刷新可以在我设定的一堆视频中随机一个当动态壁纸,在加上改一下看板娘的控件,让她可以刷新网页,就完成了可以随机选择自己喜欢的动态壁纸啦

最终成果:https://qiuliqi.top/2233/dtbz.html
效果演示


使用教程

首先需要安装好wallpaper,可以在steam上购买,20块左右也比较便宜,我这也有白嫖的wallpape下载

云盘下载

安装好了后在wallpaper界面左下角点“从URL打开”,然后复制下面这个网址点确认就行

https://qiuliqi.top/2233/dtbz.html?bottom=40&right=20

点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注