3行代码 为网站添加萌萌哒看板娘

2023-11-23 00:10
文章标签 代码 网站 看板娘 萌萌

本文主要是介绍3行代码 为网站添加萌萌哒看板娘,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

3203841-a81d34ad149b9d4a.png

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

  • 上面这一段是百度说的

为网站添加萌萌哒看板娘, 可以让网站更有吸引力

  • 上面这一句是昭昭说的

以下Gif图录制页面: https://zhaoolee.github.io/GBlog/

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

效果如图所示:

  • 可以玩射击游戏, 被射击到的网页元素会消失
3203841-58f6f1ffa4ea1a71.gif

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

  • 更换看板娘
3203841-2295f731f48defc9.gif

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

  • 给看板娘换装
3203841-9362ce15659fd8de.gif

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

  • 换了好看的衣服, 拍张照片吧!
3203841-293a2912006d5729.gif
  • 看博客的时候, 看板娘会给出贴心小提示
3203841-c3ece7a71732110b.gif

如何安装看板娘

  • 只需在网页中引入这三行代码即可
<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>

定制看板娘的语录(调教你的看板娘)

    1. 从github中下载项目: https://github.com/stevenjoezhang/live2d-widget
    1. 更改waifu-tip.json里面的内容


      3203841-bf6b160f62cd833d.png
    1. 更改autoload.js的引入位置
      <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script> 改成自己的
      如果实在不会玩, 可以参考我的代码, 开源地址: https://github.com/zhaoolee/GBlog

小结:

看板娘的很多语言都是通过配置文件定制的, 所以看板娘的秉性全靠主人的本事, 我改了一下配置文件, 感觉很欢乐, 甚至玩出了人工智能的感觉~

这篇关于3行代码 为网站添加萌萌哒看板娘的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/413911

相关文章

Java集合之Iterator迭代器实现代码解析

《Java集合之Iterator迭代器实现代码解析》迭代器Iterator是Java集合框架中的一个核心接口,位于java.util包下,它定义了一种标准的元素访问机制,为各种集合类型提供了一种统一的... 目录一、什么是Iterator二、Iterator的核心方法三、基本使用示例四、Iterator的工

Java 线程池+分布式实现代码

《Java线程池+分布式实现代码》在Java开发中,池通过预先创建并管理一定数量的资源,避免频繁创建和销毁资源带来的性能开销,从而提高系统效率,:本文主要介绍Java线程池+分布式实现代码,需要... 目录1. 线程池1.1 自定义线程池实现1.1.1 线程池核心1.1.2 代码示例1.2 总结流程2. J

JS纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

Vue实现路由守卫的示例代码

《Vue实现路由守卫的示例代码》Vue路由守卫是控制页面导航的钩子函数,主要用于鉴权、数据预加载等场景,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一、概念二、类型三、实战一、概念路由守卫(Navigation Guards)本质上就是 在路

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

JAVA实现Token自动续期机制的示例代码

《JAVA实现Token自动续期机制的示例代码》本文主要介绍了JAVA实现Token自动续期机制的示例代码,通过动态调整会话生命周期平衡安全性与用户体验,解决固定有效期Token带来的风险与不便,感兴... 目录1. 固定有效期Token的内在局限性2. 自动续期机制:兼顾安全与体验的解决方案3. 总结PS

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》:本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型

Python屏幕抓取和录制的详细代码示例

《Python屏幕抓取和录制的详细代码示例》随着现代计算机性能的提高和网络速度的加快,越来越多的用户需要对他们的屏幕进行录制,:本文主要介绍Python屏幕抓取和录制的相关资料,需要的朋友可以参考... 目录一、常用 python 屏幕抓取库二、pyautogui 截屏示例三、mss 高性能截图四、Pill

使用MapStruct实现Java对象映射的示例代码

《使用MapStruct实现Java对象映射的示例代码》本文主要介绍了使用MapStruct实现Java对象映射的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、什么是 MapStruct?二、实战演练:三步集成 MapStruct第一步:添加 Mave

Java抽象类Abstract Class示例代码详解

《Java抽象类AbstractClass示例代码详解》Java中的抽象类(AbstractClass)是面向对象编程中的重要概念,它通过abstract关键字声明,用于定义一组相关类的公共行为和属... 目录一、抽象类的定义1. 语法格式2. 核心特征二、抽象类的核心用途1. 定义公共接口2. 提供默认实