3行代码 为你的网站博客添加萌萌哒可爱二次元女动漫玩偶人物(看板娘)

看板娘一词源自日语“看板娘(かんばんむすめ)”。其中的“看板”指的是店面招牌,或者是为了宣传、打广告而制作的宣传牌。“看板娘”也就是店面的招牌姑娘,亦即能够提升店面人气和顾客流量的女服务生、女店员等。也就是说,看板娘本身就是一块“活看板”,其本身的魅力就能够起到宣传、拉人气的作用。英语又称之为“Poster Girl”。

  默认只在PC端才会显示 (手机屏幕太小, 放上看板娘容易遮挡内容, 体验不好);

效果如图所示:

  • 可以玩射击游戏, 被射击到的网页元素会消失


里面的子弹可以穿越屏幕边缘的哦(空格键发射子弹, 左右键旋转飞机??)

  • 更换看板娘


更换看板娘的记录,会被存储到浏览器的Local Storage里面, 下一次进入网页, 依然会是你喜欢的看板娘

  • 给看板娘换装


看板娘换装的记录,也会被存储到浏览器的Local Storage里面, 下一次进入网页, 依然会是你喜欢的看板娘和她的衣服

  • 换了好看的衣服, 拍张照片吧!

  • 看博客的时候, 看板娘会给出贴心小提示

如何安装看板娘

  • 只需在网页中引入这三行代码即可!

  • <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

个人网站的话直接可以把相应代码复制到网页文件中;

如果是博客的话,需要在博客网站设置中申请JS权限,然后添加哦!

原文链接:https://zhaoolee.com/GBlog/2019/07/04/live2d/

原文地址:https://www.cnblogs.com/zhaohongcheng/p/11725363.html

时间: 2024-10-11 12:04:08

3行代码 为你的网站博客添加萌萌哒可爱二次元女动漫玩偶人物(看板娘)的相关文章

【转载】国内网站博客数据统计选免费Google Analytics还是百度统计

[转载]国内网站博客数据统计选免费Google Analytics还是百度统计 Google Analytics谷歌统计是我用的第一个网站统计工具,当然现在也一直在用.Google Analytics凭借其强大的功能和超强的稳定性.快速的反应能力.广泛的数据应用功能,受到了广大站长的追捧. 使用Google Analytics的站长们应该不在少数吧,每天登录Google Analytics免费网站上查看网站的流量也是我们这些站长们必须做的事情,认真分析Google Analytics当中的数据信

杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站

我们做一个网站就是要不断给访客提供最佳的用户体验,同时提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个是怎样实现的呢?其实很简单,下面我就将核心文件和代码分享给大家. 第一步:添加语录功能的核心文件. 在网站的根目录里面添加一个yulu的文件夹,里面含有index.php和yulu.txt两个文件.其中index.php里面是核心代码,yulu.txt是要显示的经典语录,一条占用一行. 文末免费给出了所

网站博客更换主机空间搬家:Discuz! X2.5老鹰主机搬家全过程

http://www.freehao123.com/discuz-x2-5-banjia/由于我放在hawkhost老鹰主机主机的部落论坛就要到期了,而老鹰主机的续费价格却是按照原价来的,没有任何优惠可言.所以如果按照原价来续费的话,老鹰主机的性价比还不如首年购买主机5折优惠要划算些. 为了省钱,我又重新购买了一个老鹰主机的Basic套餐,将原来的Discuz! X2.5搬家到新的空间的上,整个过程从购买空间成功到等待激活,再到空间完成搬家和域名解析大概没用过12小时. 恰好有朋友咨询我关于如何

#WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能

原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需要花费不少的精力,大多数朋友和蜗牛一样都是利用自己业余时间对博客进行管理与维护(如果大家觉得蜗牛789文章能起到一定帮助作用,也欢迎对蜗牛进行打赏,目前大家可以通过支付宝扫红包活动对蜗牛进行打赏,无需自己掏腰包#每日#支付宝扫码最高领取99元红包 可用于店面消费或捐赠蜗牛). 在此文章中蜗牛为大家分

为什么程序员的个人网站博客一般都很丑?

为什么程序员的个人网站博客一般都很丑?说实话,在国内程序员的个人站UI.UE出彩的还是比较少的,依然还是90年代是web1.0的风格. 而且,作为前端程序员,什么交互设计,什么css3动效果,平常项目中的一些蹦跶酷炫的style并没有在自己的网站得以 呈现. 比如我的网站,从12年匆忙上线到现在,基本上是个试用品.之前做个人运营 一叶飘(yiyepiao.cn).启导者(qidaozhe.cn)还是花点心思.作为一个草根站长,也幻想过站在web的风口被吹上天. 说实话,对于现在的网站,UI上是不

hexo next主题为博客添加分享功能

title: hexo next主题为博客添加分享功能 date: 2018-01-06 20:20:02 tags: [hexo博客, 博客配置] categories: hexo next主题配置 --- 今天心血来潮,决定给博客添加分享功能,百度上首先是找到了使用shareSDK的分享功能,最后在实践的过程中发现它添加时步骤比较多,添加完成后效果比较丑(就是一个长条的浅蓝色按钮),而且点击后想要退出分享比较麻烦(它的取消按钮实在太难找了,它在页面最下方的位置,呈现浅灰色,这个设计太反人类了

杨泽业:给你的wordpress博客添加SMTP邮件服务,评论以后邮件通知

当你的博客有人评论的时候,就会收到邮件通知,那是非常好的体验,有人评论了自己第一时间知晓.特别是,有人在你的博客留言,需要有人解答问题的时候,这个人是迫切的需要及时通知的,有的评论自动邮件通知的话,那么就轻松了. 要实现评论邮件通知,还是不难的.下面,我就说说,使用腾讯的免费企业邮箱配置SMTP邮件服务.(没有企业邮箱的请查看我上一个文章<用你自己的域名免费的开通腾讯企业邮箱图文教程>) 先在模板函数 (functions.php)文件底部添加下面代码即可,邮箱的帐号密码改成自己的帐号密码.

Hexo博客添加在线联系功能

title: Hexo博客添加在线联系功能 date: 2018-08-29 21:03:11 tags: - 博客 - git - hexo - 博客优化 categories: 搭建博客 --- Hexo博客添加在线联系功能 Hexo博客如何添加在线联系功能呢,发现了一个不错的网站可以提供在线联系的服务,当有用户在网页上给你留言后会通过邮件或者微信通知你,可以及时的解答用户的疑问. 最终的效果可以参考我博客的右下角,有个聊天的按钮,效果如下所示: 配置方法如下: 首先到DaoVoice上注册

给博客添加Flash时钟

依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs自带的功能...),主题样式换了好几个,就是找不到带Flash样式的.不过倒是在设置里找到个“博客侧边栏公告”的东东,如图所示. 想起刚上大学那会大家在网上搜免费的QQ空间主题js代码的经历,感觉突破口就是它了.稍稍问了一下度姑娘,还真找到了解决方案,总结如下: 1.添加object标签 既然说支持