网页添加Live 2D看板娘超简单教程—

　　什么是看板娘？移目至左下角，这就是看板娘!

　　什么？没出来？鼠标放上去只有文字？那是因为源代码放在GitHub上，GitHub国外的网站，国内加载的慢啊，稍稍等一下啦，客官也可以亲自去GitHub拉源代码在本地研究哦。

　　看板娘是一种职业和习惯称呼，也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。

　　网络上已经有太多太多加看板娘到自己网站上的代码，但是我觉得对于编程不太熟练的人来说，加起来还是相当麻烦的，因为有很多不必要的代码也加在里面，今天我终于想起来，整理一个只有关键代码的帖子来分享给大家！因为很　　　　　　　　多代码都是已经打包好放在GitHub的，我整理出来链接大家直接饮用(引用)即可！上代码！

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live2D 看板娘</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@0.8.3/autoload.js"></script>
</body>
</html>

　　如果你不知道代码放在哪的话，请你接着往下看。

　　返回你的电脑桌面，新建一个文本文档，名字随便起，打开，把上边的代码粘贴进去，像这样：

　　然后Ctrl+S 保存，然后关闭，接着右键这个文本文档，重命名，把“.”后边的txt改成html，他会提示你可能会导致不可用，没关系，小确定按下去！

　　如果你的文件不显示“.”后边的后缀名的话，看我的，打开“我的电脑/此电脑”，点这里“查看”，再点这里“文件扩展名”，勾选框框就好啦(图片点击可以放大看！)

　　这个操作不要怕，打开或是关闭都是不会破坏你的电脑滴。看个人喜好了

　　然后再次点击这个变成网页的文本文档，它就会用你电脑上的浏览器打开，然后你就可以看到效果啦，图片出来的慢，请耐心等待！

　　如果你会写html代码的话，也可以丰富一下你的网页哦！

　　你也可以把这串代码直接复制到你做好的页面里，记得放在<head></head>标签里(代码规范，其实放哪都行的)

　　好了，废话不多说，看效果！点第三个按钮可以换角色的！快去试试！可以的话回来点个赞！

看我博客园效果

网页添加Live 2D看板娘超简单教程——伸手即可带走 - 给自己个晚安 - 博客园什么是看板娘？移目至左下角，这就是看板娘! 什么？没出来？鼠标放上去只有文字？那是因为源代码放在GitHub上，GitHub国外的网站，国内加载的慢啊，稍稍等一下啦，客官也可以亲自去GitHub拉源代https://www.cnblogs.com/ccgn/articles/16113427.html

网页添加Live 2D看板娘超简单教程——伸手即可带走相关推荐

【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
苹果，U盘越狱iPhone绕ID最新教程及各种坑解决，吐血之作（超详细超简单教程）-balenaEtcher-Checkm8-bootra1n
U盘越狱iPhone绕ID最新教程及各种坑解决,吐血之作(超详细超简单教程)-balenaEtcher-Checkm8-bootra1n 这是安装多个苹果版本及虚拟机版本后成功的教程,由于资源上传到百 ...
宝塔linux输入bt,Linux宝塔面板如何挂载硬盘？BT宝塔面板磁盘挂载超简单教程来了！...
Linux宝塔面板如何挂载硬盘?BT宝塔面板磁盘挂载超简单教程来了! 为解决这个问题,我们制作了磁盘自动挂载工具,支持Centos.Ubuntu.Debian.Fedora说明: 1:本工具默认将数据 ...
html给看板娘添加语音,如何在网页上插入一个看板娘
首先准备一个html,放在tomcat的webapps的文件夹下,或者利用Hbuilder(hbuilder内置服务器了的),下载好的文件也放在webapps下由于看板娘用到ajax技术,而ajax ...
看板娘全是php的怎么办,【教程】给网站添加互动二次元看板娘老婆
[本教程来自网络,已亲测可用,以下教程为详解,如有问题请指出] [关于二次元看板娘] 这是在PC网页上的效果及位置这是在手机端的效果(可能没有对话框,因为没有电脑端的鼠标指示) 教程开始首先你要有 ...
【前端实例代码】Html5+css3+JavaScript实现新拟态新拟物风格(Neumorphism)图标按钮动效网页效果~手把手教学~新手必会~超简单 ~
b站视频演示效果: 效果图: 完整代码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
博客园随机切换背景图，超简单教程
目录一.前言二.准备工作三.实现代码四.结尾一.前言博客园做的还是挺强大的,很多东西都支持自定义,比较适合喜欢瞎捣鼓的小伙伴.之前写过一篇博客园看板娘的教程,有兴趣的小伙伴可以看一下:ht ...
搭建React项目，超简单教程
步骤前言一.安装create-react-app 二.使用步骤 1.创建项目 2.运行项目 3.文件目录总结前言最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借 ...
ASP.NET Core 上传多文件超简单教程
示例源码下载地址 https://qcloud.coding.net/api/project/3915794/files/4463836/download 项目地址 https://dev.tence ...

网页添加Live 2D看板娘超简单教程——伸手即可带走

网页添加Live 2D看板娘超简单教程——伸手即可带走相关推荐

最新文章

热门文章