管理 --> 設置 -->自定義頁面代碼
頁面風格使用：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="http://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"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/huihuihero/waifu.css">
<div class="waifu" id="waifu">
<div class="waifu-tips" 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">initModel()</script>
</body>
</html>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
看板萌娘第二種方法，普通版(見博客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",
"scale": 1
},
"display": {
"position": "left", //看板孃的表現位置
"width": 90, //小蘿莉的寬度
"height": 200, //小蘿莉的高度
"hOffset": 15,
"vOffset": -66
},
"mobile": {
"show": true,
"scale": 1
},
"react": {
"opacityDefault": 1, //透明度
"opacityOnHover": 0.5
}
});
}
</script>
頁腳html代碼
<script type="text/javascript"> //鼠標點擊效果第一種(富強民主和諧。。。)
var getRandomColor = function () {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var 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(),
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script> //鼠標點擊特效第二種(小煙花)