Loading... 偶然逛到一篇爆胎大佬写的Live2dv3[自适应导航页教程](https://www.itggg.cn/fx/526.html),被这种技术深深迷住了。于是就用大佬提供的项目搭建了一个导航页面。 > **《Live2D》是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。** 因为是编程小白一枚,在搭建过程中,也遇到这样那样的问题。腆着脸在爆胎大佬的评论区求助,还好大佬不吝赐教,总算是把框架搭建好了。 还融入了我的一些想法,比如: 1. [ ] 想让导航界面简洁易用; 2. [ ] 有个人名片,可以为我的博客引流; 3. [ ] 整体色调比较和谐,操作区要统一; 4. [ ] 尽可能的提供更便利的功能; 5. [ ] 可以根据用户喜好更改的设置。 在这些需求中,我又找到了另一位大佬分享的[极简键盘导航](https://yqshare.cn/index.php/archives/31/)教程,很符合我的想法。于是我把代码也抄了过来。![请输入图片描述](https://burningash-1312676461.cos.ap-guangzhou.myqcloud.com/LIVE2D%201.webp) 这是一个虚拟键盘,每个键位对应一个空白网站(预设有一些作者喜好的常用网页链接)。只要把你收藏的网站地址填入键位中,就可以生成一个链接按钮,还能自动识别网站ICO图标。根据已填好的热键,按对应的键位就可以打开网站,简单又直观。 <div class="tip inlineBlock warning"> tips:网站会根据用户cookie记录下之前填写的网址,只要不删除cookie,这样,即使关掉网页,重新访问也能保留之前的记录。 </div> 背景我使用了渐变色,配合live2d建模,界面比较清爽。 还有名片界面,也有学习JS响应式的设计,能让界面很好的融入整体,废了不少功夫去研究css的属性设置,才把它摆布好。学无止境哈~ ![名片](https://burningash-1312676461.cos.ap-guangzhou.myqcloud.com/live2d%202.webp) 也引入了一言接口,每次刷新会更新一条语录,能让交互感更好一些。 下方的关注,被关注,以及文章数的数据还得研究一下python,才能更新。 其他还设想加入响应式的搜索栏,方便有搜索需求的朋友。 <div class="tip inlineBlock error"> 目前还没掌握手机的css样式,不适合在小屏上使用 </div> **以上便是我目前制作的,请看最终成品:** [burningash-极简一键式导航](https://to.burningash.cn/) 喜欢的话可以收藏,设为首页导航,有其他的建议也可以留言交流。如果以后优化好了,可能会更新V2版本。 **需要live2d导航页面资源的朋友可以直接到爆胎大佬的网盘下载:** [链接](https://p.tiax.cn/ALIYUN/index.rar) burningash.cn Burningash 版权申明 www.burningash.cn 若无注明,本文皆burningash原创 转载请保留文章出处 最后修改:2022 年 11 月 21 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏 下一篇 上一篇 发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论,继续评论表示您已同意该条款 评论 * 名称 * 🎲 邮箱 * 地址 发表评论 提交中...