https://github.com/2662419405/cnblogs
💘🍦🙈 残梦a博客园样式,本博客的样式一直在更新中,还会不断优化页面的加载速度,坚持每周都会更新自己的博客内容,坚持自己选择计算机的道路 -> https://www.cnblogs.com/sunhang32
https://github.com/2662419405/cnblogs
canvas css html javscript live2d md
Last synced: 12 months ago
JSON representation
💘🍦🙈 残梦a博客园样式,本博客的样式一直在更新中,还会不断优化页面的加载速度,坚持每周都会更新自己的博客内容,坚持自己选择计算机的道路 -> https://www.cnblogs.com/sunhang32
- Host: GitHub
- URL: https://github.com/2662419405/cnblogs
- Owner: 2662419405
- License: mit
- Created: 2019-11-13T06:07:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-02T12:33:23.000Z (over 4 years ago)
- Last Synced: 2025-03-24T03:04:36.100Z (about 1 year ago)
- Topics: canvas, css, html, javscript, live2d, md
- Language: HTML
- Homepage:
- Size: 1.75 MB
- Stars: 47
- Watchers: 4
- Forks: 23
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
.png)
## 欢迎来到残梦博客园
> 说明: 这个样式并非全是自己所写,每个人都学习了一部分
* 博客园网址 : -----> [博客园网址](https://www.cnblogs.com/sunhang32)
* 自己如何也弄一个? 使用说明
* 目前有哪些功能? 目前功能
* 效果图啥样? 效果图展示
* 动动小手点个star呗,让我有动力继续更新下去,感谢感谢^-^!
## 目前功能
* :octocat: 键盘按下效果
* :apple: 鼠标指针改变
* :tangerine: 导航栏自定义
* :cherries: 恶搞标题
* :banana: 看板娘-猫
* :peach: 音乐-网易云
* :pineapple: 左侧点击弹出
* :watermelon: 页面顶部滚动进度
* :grapes: 点击页面跳动可爱的文字
* :tomato: 随笔背景特效
* :pear: 响应式开发
* :book: 网站运行时间
* :shaved_ice: 动态线条背景
* :strawberry: 背景线条特效
* :baby:代码雨
* :peach: DaoVoice聊天
* :sparkles: 自动打代码功能
* :memo: 欢迎访问的人描述
* :green_heart: 全屏文字抖起来
* :fire: 点击页面显示小豆子
* :lemon: 右上角关注github
## 效果图展示
> 电脑端效果图
> 手机端效果图
## 如果感觉勉强可以看几眼的话,那么你也来做一个吧
### 使用说明
* 首先你要有一个[博客园](https://www.cnblogs.com)(估计会`github`的都应该知道了)
* 在[博客园](https://www.cnblogs.com)的官网左上角开通博客园
* 博客园的个人配置页面->先申请js权限
* 禁用页面的css样式
* 选择博客主题 SimpleMemory
> 以下是代码配置
* 粘贴代码到定制页面css代码中 [css](/css/sh.css)
* 粘贴博客侧面公告代码
```html
window.cnblogsConfig = {
GhVersions : 'v1.2.0', // 版本
blogUser : "残梦", // 用户名
essayCodeHighlightingType: "highlightjs",
essayCodeHighlighting: "vs2015",
homeTopImg: [
"http://img.shtodream.cn/37.jpg"
],
menuUserInfoBgImg: 'https://bndong.github.io/images/menu_bg.gif',
menuNavList: [ // 列表数据 ['导航名称', '链接']
['github', 'https://github.com/2662419405'],
['CSDN', 'https://blog.csdn.net/qq_43268396'],
['技能树', 'https://shtodream.cn/about/'],
['留言板', 'https://shtodream.cn/message/'],
],
fontIconExtend: "//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css", //字体图标扩展
webpageTitleOnblur : "(◍´꒳`◍)你为何狠心离去 ", // 当前页失去焦点，页面title显示文字
webpageTitleOnblurTimeOut : 500, // 当前页失去焦点，页面title变化，延时时间，单位毫秒
webpageTitleFocus : "(*´∇｀*) 帅的人回来了！", // 当前页获取焦点，页面title显示文字，显示后延时恢复原title
webpageTitleFocusTimeOut : 2000, // 当前页获取焦点，页面title变化，延时时间，单位毫秒
blogAvatar : "https://cdn.jsdelivr.net/gh/2662419405/CDN@1.0/sh.jpg", // 用户头像
blogStartDate : "2019-11-07", // 入园时间，年-月-日。入园时间查看方法：鼠标停留园龄时间上，会显示入园时间
}
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/bd4254a0.js","daovoice")
daovoice('init', {
app_id: "bd4254a0"
});
daovoice('update');
```
* 粘贴页首代码
```html
皮一下
```
* 粘贴页脚代码
```html
载入天数...载入时分秒...
window.onload=function(){
$(".vertical").append("<div id='shContent'><span id='subtitle'></span><span id='typed-cursor'></span></div>")
var typed=new Typed("#subtitle",{strings:["Live a good life, write some good code !!!","愿自己的努力终将获得回报","花开不是为了花落，而是为了开的更加灿烂。","没有伞的孩子必须努力奔跑！","欲望以提升热忱，毅力以磨平高山。","如果放弃太早，你永远都不知道自己会错过什么。","没有礁石，就没有美丽的浪花；没有挫折，就没有壮丽的人生。"],startDelay:1000,typeSpeed:100,loop:!0,backSpeed:60,backDelay:2000,showCursor:!0})
}
```
##### 如果配置成功了,不妨点个赞,咱们一起开心一下,有问题可以发issues^-^
*--------------如果你对你的代码不满意的话,可以接下来自定义设置----------------*
### 下面是DIV定制
* 背景线条特效(这个比较耗费性能,尽量少用,对于手机端影响更大一些)
```js
//color 颜色
//opacity 透明度
//zIndex 层级(一般为负数)
//count数量
```
* 输入框特效
```js
```
* 点击屏幕显示文字特效
```js
```
* 背景音乐
```js
$(".aplayer-play").click() // 如果想让歌曲在页面加载完播放可以设置
```
> 修改音乐只需要修改data-id即可
* 猫
```js
```
> 目前猫还存在一点小的bug,但不影响正常使用,我也在不断改进中^-^
* 右侧直接聊天功能
```js
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/bd4254a0.js","daovoice")
daovoice('init', {
app_id: "bd4254a0"
});
daovoice('update');
```
这里面的的app_id请到 daovoice网站注册获得
* 添加github关注
自己去这里面选择自己喜欢的样式,修改一下自己的github链接,之后添加到页面即可
* 网站运行时间
```html
载入天数...载入时分秒...
var now = new Date();
function createtime() {
var grt= new Date("11/06/2019 17:38:00");//在此处修改你的建站时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
document.getElementById("timeDate").innerHTML = "本站勉强运行 "+dnum+" 天 ";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
```
> 上面的实现修改为自己创建网站的时间,把 p 标签插入到想要显示的区域即可
* 配置代码雨
1. 追加css
```css
#content_canvas {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: -1;
}
```
2. 页首html代码追加
```html
```
3. 页面底部追加代码
```js
window.onload = function(){
//获取画布对象
var canvas = document.getElementById("content_canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W /fontSize);
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="sh";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "600 "+fontSize+"px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色，十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间，肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){//随机颜色
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+")";
}
draw();
setInterval(draw,35);
};
```
> 更多的本人效果,可以浏览本人-> 学习博客