效果图
参考页面 https://www.cnblogs.com/lin02/
首先开通js权限
然后选择你自己觉得不错的模板
然后在进入你的博客页面
将写好的css代码复制沾到后台
背景图我调用的是一个API链接
随机生成二次元老婆 https://www.320nle.com/acggirl/acgurl.php
css代码:
body {
background: url(https://www.320nle.com/acggirl/acgurl.php) 0% 0% / cover no-repeat fixed;
}
看板娘是一个live2D 你可以百度看板娘 有教程
音乐是调用网易云的API 你也可以百度
这是放入 页首 HTML 代码
<embed id="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=410 src="//music.163.com/outchain/player?type=4&id=333811054&auto=1&height=430" ></embed>
右上角其实就是一个js方法 也就刷新了一下页面
function ChangePicture(){
window.location.reload();
}
</script>
左上角就是调用了一个隐藏显现函数
效果图的后台代码
1.博客皮肤(118)
BlacklowKey
2.页面定制 CSS 代码
body {
color: #000;
background: #fff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
min-height: 101%;
background: url(https://www.320nle.com/acggirl/acgurl.php) 0% 0% / cover no-repeat fixed;
}
//https://www.320nle.com/acggirl/acgurl.php
//https://i.loli.net/2019/10/11/XtAZJHUVb67aKy2.png
#TopViewPostsBlock{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#wyy {
position: fixed;
top:360px;
left:1582px;
z-index: 1;
}
#Uright {
width: 100px;
height: 100px;
top: -75px;
right: 50px;
}
#Uleft, #Uright, #Dleft, #Dright {
-moz-transition-property: top;
-moz-transition-duration: 1s;
-webkit-transition-property: top;
-webkit-transition-duration: 1s;
-o-transition-property: top;
-o-transition-duration: 1s;
position: fixed;
width: 100px;
height: 100px;
line-height: 500px;
text-align: center;
z-index: 1;
}
#Uleft {
width: 80px;
height: 80px;
top: -60px;
left: 50px;
}
#Uleft, #Uright, #Dleft, #Dright {
-moz-transition-property: top;
-moz-transition-duration: 1s;
-webkit-transition-property: top;
-webkit-transition-duration: 1s;
-o-transition-property: top;
-o-transition-duration: 1s;
position: fixed;
width: 80px;
height: 80px;
line-height: 500px;
text-align: center;
z-index: 1;
}
#blogTitle h1 {
font-size: 150%;
font-weight: bold;
line-height: 1.5em;
margin-left: 250px;
margin-top: 40px;
width: 50%;
float: left;
display: inline;
letter-spacing: 1px;
}
#blogTitle h1 a, #blogTitle h2 {
color: #FFAED7;
font-family: "微软雅黑";
text-shadow: 5px 5px 3px #5151FF;
font-size: 30px;
}
/*background: rgba(105,145,214,0.6);*/
#navigator {
background: rgba(105,145,214,0.6);
height: 60px;
clear: both;
margin-top: 60px;
position: relative;
border-radius: 5px;
border: 2px solid #bbe1f1;
}
#navList a:link, #navList a:visited, #navList a:active {
color: #5385CC;
text-shadow: 4px 4px 5px #86B8A9;
font-size: 20px;
font-weight: 600;
}
#navList a {
margin: 15px 10px 0 0;
padding: 0 10px;
font: 14px/1.5em "微软雅黑";
display: block;
}
/*background: rgba(105,145,214,0.6);*/
#main {
min-width: 980px;
text-align: left;
clear: both;
background: rgba(105,145,214,0.4);
border-radius: 5px;
}
#TopViewPostsBlock{
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#sidebar_蛮不错的一个整合工具集的网站 ul {
line-height: 1.5em;
margin-left: 20px;
}
#mainContent {
min-height: 200px;
*padding-top: 10px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
width: 800px;
background: rgba(105,145,214,0.4);
}
.dayTitle {
color: #609E89;
font-weight: bold;
line-height: 1.5em;
font-size: 110%;
margin-top: 3px;
margin-bottom: 10px;
float: right;
position: relative;
top: 40px;
font-size: 18px;
}
/*238,250,255*/
.day {
min-height: 10px;
_height: 10px;
margin-bottom: 20px;
padding-bottom: 5px;
margin-left: 20px;
margin-top: 1em;
margin-right: 2em;
border: 2px solid #bbe1f1;
background-color: rgba(238,250,255,0.5);
}
#sideBarMain {
background: rgba(105,145,214,0.4);
border: 2px solid #bbe1f1;
margin-top: 10px;
width: 170px;
}
.postTitle {
font-size: 20px;
font-weight: bold;
padding: 0 100px 10px 20px;
border-bottom: 1px solid #e0e0e0;
line-height: 1.5em;
clear: both;
border-left: 5px solid #1fa6e6;
}
.postCon {
float: right;
line-height: 1.5em;
width: 95%;
height: 50px;
clear: both;
padding: 10px 0;
}
.c_b_p_desc {
text-indent: 0;
font-size: 14px;
}
.postDesc {
float: none;
clear: both;
text-align: right;
padding-right: 5px;
color: #A56566;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
color: #2975E6;
}
.newsItem .catListTitle {
text-align: left;
padding: 5px 10px;
background: rgba(255,255,255,0.5);
}
.CalTitle {
width: 100%;
background: rgba(255,255,255,0.5);
color: #000;
border-bottom: 1px solid #666;
}
}
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle {
text-align: left;
padding: 5px 10px;
background: rgba(255,255,255,0.5);
border-bottom: none;
border: 1px solid #ccc;
}
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle {
text-align: left;
padding: 5px 10px;
background: rgba(255,255,255,0.5);
border-bottom: none;
border: 1px solid #ccc;
}
.mySearch .input_my_zzk {
height: 1.4em;
width: 100px;
background: rgba(255,255,255,0.5);
border-radius: 5px;
}
input.btn_my_zzk {
vertical-align: middle;
height: 22px;
font-size: 12px;
padding-left: 5px;
background: rgba(187,225,241,0.5);
padding-right: 5px;
border-radius: 5px;
}
.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListArticleArchive ul li, .catListImageCategory ul li, .mySearch ul li, .catListComment ul li, .catListView ul li, .catListFeedback ul li {
margin: .5em;
height: 20px;
font-size: 12px;
}
.pager {
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #fff;
background-color: rgba(124,145,213,0.8);
border-radius: 6px;
}
3.博客侧边栏公告(支持HTML代码) (支持 JS 代码)
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lin02/waifu.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<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/lin02/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/lin02/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>
4.页首 HTML 代码
<input type="image" id="Uleft" src="https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0905.JPG" onmouseover="this.style.top='10px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0904.JPG' " onmouseout="this.style.top='-40px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0905.JPG' " onclick="ShowPicture()" style="top: -40px;" title="点击看图片">
<input type="image" id="Uright" src="https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1160.JPG" onmouseover="this.style.top='10px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1161.JPG' " onmouseout="this.style.top='-40px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1160.JPG' "
onclick="ChangePicture()" style="top: -40px;" title="点击换图片">
<embed id="wyy" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=410 src="//music.163.com/outchain/player?type=4&id=333811054&auto=1&height=430" ></embed>
4.页脚 HTML 代码
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("😜java😜","🐳html🐳","🍌jQuery🍌","(⊙﹏⊙)rabbitMQ喵喵","🐴css🐴","📵js📵","👶oracle👶","☠mybatis☠","👰spring👰","嘤嘤嘤","✨springBoot✨","🏀springMVC🏀","🍕hibernate🍕","🛩struts2🛩","嘿嘿嘿","🚩redis🚩","🚅🚅🚅","🚩websocket🚩","🉑shiro🉑","💢linux💢","233 spring cloud (~ ̄▽ ̄)~","❤thymeleaf❤","(๑′ᴗ‵๑) vue I Lᵒᵛᵉᵧₒᵤ❤","★DELL★");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
function ShowPicture(){
dx = document.getElementById("main");
if (dx.style.opacity == "0") dx.style.opacity="0.9";else dx.style.opacity="0";
}
</script>
<script>
function ChangePicture(){
window.location.reload();
}
</script>