管理 --> 设置 -->自定义页面代码
页面风格使用：SimpleMemory
页面定制css,与页首代码配合适用
//雪花飘落及背景设置(背景图片通过博客园上传后获取---博客园管理>相册>上传图片>点击图片>F12查看图片路径>替换到下方代码中)
#home h1{
font-size:45px;
}
body{
background-image: url("https://images.cnblogs.com/cnblogs_com/huihuihero/1529502/o_fefmkrmg.jpg"); background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial;
height:100%;
width:100%;
}
#home{
opacity:0.7;
}
.wall{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div#midground{
background: url("https://images.cnblogs.com/cnblogs_com/huihuihero/1628712/o_200108030829midground.png");
z-index: -1;
-webkit-animation: cc 200s linear infinite;
-moz-animation: cc 200s linear infinite;
-o-animation: cc 200s linear infinite;
animation: cc 200s linear infinite;
}
/*div#foreground{
background: url("https://images.cnblogs.com/cnblogs_com/huihuihero/1628712/o_200108030913foreground.png");
z-index: -2;
-webkit-animation: cc 253s linear infinite;
-o-animation: cc 253s linear infinite;
-moz-animation: cc 253s linear infinite;
animation: cc 253s linear infinite;
}*/
div#top{
background: url("https://images.cnblogs.com/cnblogs_com/huihuihero/1628712/o_200108030829midground.png");
z-index: -4;
-webkit-animation: da 200s linear infinite;
-o-animation: da 200s linear infinite;
animation: da 200s linear infinite;
}
@-webkit-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@-o-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@-moz-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 0 600%;
}
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-webkit-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-moz-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-ms-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
页首代码
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>
侧边栏公告-看板娘
//看板萌娘第一种方法，升级版带换装换角色(见博客https://www.cnblogs.com/kousak/p/9726514.html)
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/huihuihero/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script> //指定形象
localStorage.setItem("modelId",5)
localStorage.setItem("modelTexturesId",2)
</script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/huihuihero/waifu.css">
<div class="waifu" id="waifu" style="transition: all 1s">
<div class="waifu-tips" id="talkbox" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/huihuihero/waifu-tips.js"></script>
<script src="https://blog-static.cnblogs.com/files/huihuihero/live2d.js"></script>
<script type="text/javascript">
if(document.body.clientWidth>600){
initModel()
}else{
document.getElementById("talkbox").style.display="none"
}
</script>
</body>
</html>
看板萌娘第二种方法，普通版(见博客https://www.cnblogs.com/barryzhang/p/10535960.html)
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
if(document.body.clientWidth>600){ //当屏幕尺寸小于600px时，看板娘不显示
L2Dwidget.init({
"model": {
//jsonpath控制显示的看板任务模型，
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json", //课桌女孩
//jsonPath: "https://unpkg.com/live2d-widget-model-wanko@latest/assets/wanko.model.json", //碗-小狗
//jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@latest/assets/hijiki.model.json", //大黑猫
//jsonPath: "https://unpkg.com/live2d-widget-model-tororo@latest/assets/tororo.model.json", //大白猫
//jsonPath: "https://unpkg.com/live2d-widget-model-haruto@latest/assets/haruto.model.json", //水手帽小男孩
//jsonPath: "https://unpkg.com/live2d-widget-model-koharu@latest/assets/koharu.model.json", //水手帽小女孩
//jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@latest/assets/unitychan.model.json", //小小小萝莉
"scale": 1
},
"display": {
"position": "left", //看板娘的表现位置
"width": 90, //小萝莉的宽度
"height": 200, //小萝莉的高度
"hOffset": 20,
"vOffset": -66
},
"mobile": {
"show": true,
"scale": 1
},
"react": {
"opacityDefault": 0.9, //透明度
"opacityOnHover": 0.5
}
});
}
</script>
看板娘第三种方法
// live2d_path 参数建议使用绝对路径
const live2d_path = "https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
//const live2d_path = "/live2d-widget/";
// 封装异步加载资源的方法
function loadExternalResource(url, type) {
return new Promise((resolve, reject) => {
let tag;
if (type === "css") {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
}
else if (type === "js") {
tag = document.createElement("script");
tag.src = url;
}
if (tag) {
tag.onload = () => resolve(url);
tag.onerror = () => reject(url);
document.head.appendChild(tag);
}
});
}
// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
// 指定形象
localStorage.setItem("modelId",5)
localStorage.setItem("modelTexturesId",2)
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
// 配置选项的具体用法见 README.md
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
apiPath: "https://live2d.fghrsh.net/api/",
//cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"], //工具栏配置
});
});
}
注：
/* 隐藏看板娘聊天框 */
#waifu-tips{
display: none;
}
/* 看板娘样式 */
#waifu{
left: auto;
right: 0;
}
侧边栏公告改版（自定义了一些样式，包括发光字、去除字体icon图标等）
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/huihuihero/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
.operationbtn{
color: #fff!important;
margin-bottom: 20px;
font-size: 14px;
font-family: SimSun!important; //去除字体图标，此注释应用时需删除
transition: all .5s;
font-weight: 700!important;
animation: light 1.4s ease infinite alternate; //发光字动画，此注释应用时需删除
}
.operationbtn:hover{
color: #333!important;
}
.waifu-tool{ //发光字位置调整，此注释应用时需删除
top: unset!important;
bottom: 10px;
}
@keyframes light {
0% {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #fff700,
0 0 70px #fff700,
0 0 80px #fff700,
0 0 100px #fff700,
0 0 150px #fff700;
}
100% {
text-shadow: 0 0 0px #fff,
0 0 5px #fff,
0 0 10px #fff,
0 0 15px #fff700,
0 0 20px #fff700,
0 0 30px #fff700,
0 0 40px #fff700,
0 0 50px #fff700;
}
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/huihuihero/waifu.css">
<div class="waifu" id="waifu" style="transition: all 1s;right: 10px;left: unset">
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-eye operationbtn">换个人er~</span>
<span class="fui-user operationbtn">换身衣服</span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/huihuihero/waifu-tips.js"></script>
<script src="https://blog-static.cnblogs.com/files/huihuihero/live2d.js"></script>
<script type="text/javascript">
if(document.body.clientWidth>600){
initModel()
}else{
document.getElementById("talkbox").style.display="none"
}
</script>
</body>
</html>
侧边栏公告，雨幕动效
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.cloud-rain-container {
position: fixed;
width: 100%;
height: 100%;
right: 0;
top: 0;
z-index: -1;
}
.cloud-rain {
}
.cloud-rain::before {
}
.cloud-rain .text {
position: absolute;
top: 0;
line-height: 20px;
text-transform: uppercase;
color: #fff;
/* 为文字添加阴影，看上去发光，增加视觉效果 */
text-shadow: 0 0 5px #fff, 0 0 15px #fff, 0 0 30px #fff;
transform-origin: bottom;
animation: animate 30s linear forwards;
white-space: nowrap;
}
@keyframes animate {
0% {
transform: translateX(0);
}
70% {
transform: translateY(2000px);
}
100% {
transform: translateY(2000px);
}
}
</style>
</head>
<body>
<div class="cloud-rain-container">
<div class="cloud-rain"></div>
</div>
<script>
// 从给定的数组中随机取出一个字符
function randomText() {
const texts = new Array("富强","民主","和谐","文明","自由","平等","公正","法治","爱国","敬业","诚信","友善");
const text = texts[Math.floor(Math.random() * texts.length)];
return text;
};
// 获取随机颜色
function getRandomColor() {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
function rainEffect() {
const cloudEle = document.querySelector(".cloud-rain");
const textEle = document.createElement("div");
textEle.innerText = randomText();
textEle.classList.add("text");
const left = Math.floor(Math.random() * 3000);
const size = Math.random() * 1;
const duration = Math.random();
const styleSheets = {
left: `${left}px`,
fontSize: `${1 + size}em`,
animationDuration: `${30 + duration}s`,
color: getRandomColor(),
};
Object.assign(textEle.style, styleSheets);
cloudEle.appendChild(textEle);
setTimeout(() => {
cloudEle.removeChild(textEle);
}, 30000);
};
// 每隔xx ms创建一个雨滴元素
setInterval(() => rainEffect(), 1000);
</script>
</body>
</html>
侧边栏公告，雪花动效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#snow-container{
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="snow-container"></div>
<script>
import("https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js")
// 转换随机数
function fixedRandomNum(num,digit=2){
return Number.parseFloat((Math.random()*num).toFixed(digit))
}
// 创造雪花
function createSnow(flake, dw, dh, initTop){
//随机生成雪花下落 开始时left的值，相当于开始时X轴的位置
let startLeft = fixedRandomNum(dw);
//随机生成雪花下落 结束时left的值，相当于结束时X轴的位置
let endLeft = startLeft + (Math.random() < 0.5 ? -1 : 1)*fixedRandomNum(350) ;
//随机生成雪花大小
let flakeSize = 10 + fixedRandomNum(15);
//随机生成雪花下落持续时间
let durationTime = 25000 + fixedRandomNum(15000);
//随机生成雪花下落 开始 时的透明度
let startOpacity = 0.4 + fixedRandomNum(0.4);
//随机生成雪花下落 结束 时的透明度
let endOpacity = 0.2 + fixedRandomNum(0.2);
//3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中
flake.clone()
.appendTo($("#snow-container"))
.css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": initTop+'px', })
.animate(
{ "left": endLeft, "opacity": endOpacity, "top": dh },
durationTime,
function() {
$(this).remove(); //移除雪花
}
);
}
//执行雪花动效
function startSnow() {
//定义一片雪花模板 ● ❉
let flake = $("<div>").css({ "position": "absolute", "color": "#fff" }).html("❉");
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
let dw = $(document).width();
//获取页面的高度 相当于雪花下落结束时Y轴的位置
let dh = $(document).height();
//周期性生成雪花；
setInterval(() => {
let initTop = -25
createSnow(flake, dw, dh, initTop)
}, 300);
// 初始生成一定数量雪花
for(let i=0; i<=30; i++){
let initTop = fixedRandomNum(dh)
createSnow(flake, dw, dh, initTop)
}
}
startSnow();
</script>
</body>
</html>
页脚html代码
<script type="text/javascript"> //鼠标点击效果第一种：富强民主和谐。。。（可自定义）
var getRandomColor = function () {
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤ 富强 ❤","❤ 民主 ❤","❤ 和谐 ❤","❤ 文明 ❤","❤ 自由 ❤","❤ 平等 ❤","❤ 公正 ❤","❤ 法治 ❤","❤ 爱国 ❤","❤ 敬业 ❤","❤ 诚信 ❤","❤ 友善 ❤");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX;
y = e.pageY;
$i.css({
"z-index": 999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"font-size":"14px",
"color":getRandomColor(),
"font-family": "PingFang SC-Regular, PingFang SC",
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0,
"font-size":"20px",
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script src="https://files.cnblogs.com/files/huihuihero/cursorEffect.js"></script> //鼠标点击特效第二种：小烟花
<script src="https://files.cnblogs.com/files/huihuihero/heartEffect.js"></script> //鼠标点击特效第三种：小心心特效
jsi-flying-fish动态效果（写在页首HTML代码里）
https://www.cnblogs.com/huihuihero/p/17458274.html
浙公网安备 33010602011771号