需要使用到的工具
- Chrome
- Pycharm
- 自定主题的CSS
- 申请博客的Js权限
- 设置博客选项
打开Chrome修改查看CSS样式，Windows(F12)，MacOS(Command+Option+I)打开开发工具
使用搜索引擎搜索一个你喜欢的H5的背景效果
CSS代码
1 #home {
2 margin: 0 auto;
3 width: 80%;
4 min-width: 950px;
5 background-color: #ffffffc0;
6 padding: 30px;
7 margin-top: 10px;
8 margin-bottom: 10px;
9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
10 font-family: monaco, monospace, "Microsoft YaHei", Consolas, "Courier New";
11 }
12
13 /*解决上传图片宽度限制700*/
14 #cnblogs_post_body img {
15 width: auto;
16 height: auto;
17 max-width: 100%;
18 max-height: 100%;
19 }
20
21 .blogStats {
22 float: right;
23 color: #757575;
24 margin-top: 19px;
25 margin-right: 2px;
26 text-align: right;
27 padding-top: 10px;
28 font-size: 12px;
29 }
30
31 /*标题*/
32 #blogTitle h1 a {
33 color: #2375a5;
34 font-size: 42px;
35 }
36 #blogTitle a:hover{
37 color: black;
38 }
39
40 /*页面导航*/
41 #navigator {
42 font-size: 18px;
43 border-bottom: 1px solid #ededed;
44 border-top: 1px solid #ededed;
45 height: 50px;
46 clear: both;
47 margin-top: 25px;
48 }
49 #navList {
50 min-height: 30px;
51 float: left;
52 padding-top: 10px;
53 }
54 /*将管理连接移到最后一项*/
55 #navList li {
56 float: right;
57 margin: 0;
58 }
59 #navList a {
60 display: block;
61 width: auto;
62 height: 22px;
63 float: left;
64 text-align: center;
65 padding-top: 5px;
66 padding-bottom: 5px;
67 padding-left: 20px;
68 padding-right: 20px;
69 }
70 #navList a:link, #navList a:visited, #navList a:active {
71 color: #2475a5;
72 font-weight: bold;
73 }
74 #navList a:hover{
75 color: white;
76 background-color: black;
77 }
78
79 #mainContent {
80 min-height: 200px;
81 padding: 0px 0px 10px 0;
82 -o-text-overflow: ellipsis;
83 text-overflow: ellipsis;
84 overflow: hidden;
85 float: right;
86 margin-left: -22em;
87 width: 100%;
88 }
89
90 #sideBar {
91 margin-top: -15px;
92 width: 230px;
93 min-height: 200px;
94 padding: 0px 0 0px 5px;
95 float: left;
96 -o-text-overflow: ellipsis;
97 text-overflow: ellipsis;
98 overflow: hidden;
99 }
100
101 .postTitle {
102 border-left: 5px solid #008200;
103 margin-bottom: 10px;
104 font-size: 28px;
105 float: right;
106 width: 100%;
107 clear: both;
108 /*颜色渐变背景*/
109 /*background: -webkit-linear-gradient(left, #22282b80, rgba(0, 0, 0, 0));*/
110 }
111
112 #topics .postTitle {
113 border: 0px;
114 font-size: 180%;
115 font-weight: bold;
116 float: left;
117 line-height: 1.5;
118 width: 100%;
119 padding-left: 5px;
120 }
121
122 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
123 /*背景透明*/
124 background: #fff0;
125 margin-bottom: 35px;
126 word-wrap: break-word;
127 box-shadow: 20px 0px 5px 0px rgba(100, 100, 100, 0.3);
128 }
129
130 /*侧边栏输入框透明*/
131 .input_my_zzk {
132 border: 1px solid #ccc;
133 width: 100%;
134 height: 25px;
135 padding-right: 30px;
136 padding-left: 5px;
137 outline: 0;
138 /*输入框背景透明*/
139 background-color: #fff0;
140 }
141
142 /*自定制子菜单样式*/
143 #sub_nav {
144 display: none;
145 margin-top: 35px;
146 /*子菜单缩进*/
147 /*position: absolute;*/
148 }
149 #sub_nav ul{
150 float: none;
151 }
152 #sub_nav li{
153 float: none;
154 }
155 #navList li:hover #sub_nav{
156 display: block;
157 }
158 #sub_nav a{
159 float: none;
160 }
161
162 /*代码样式*/
163 .cnblogs_code {
164 background-color: #97b12e87;
165 font-family: monaco, "Courier New"!important;
166 font-size: 14px!important;
167 border: 1px solid rgba(82, 168, 236, 0.8);
168 padding: 5px;
169 overflow: auto;
170 margin: 5px 0;
171 color: #069;
172 }
173 /*普通文本*/
174 .cnblogs_code pre {
175 font-family: monaco, "Courier New"!important;
176 font-size: 14px!important;
177 word-wrap: break-word;
178 white-space: pre-wrap;
179 }
180 .cnblogs_code textarea {
181 font-family: monaco, "Courier New"!important;
182 font-size: 14px!important;
183 }
184 /*语法文本*/
185 .cnblogs_code span {
186 font-family: monaco, "Courier New"!important;
187 font-size: 14px!important;
188 line-height: 1.5!important;
189 }
190 .cnblogs_code div {
191 background-color: #0000;
192 }
Js代码
Canvas特效(particles_build.js)
1 window.requestAnimFrame = (function () {
2 return window.requestAnimationFrame ||
3 window.webkitRequestAnimationFrame ||
4 window.mozRequestAnimationFrame ||
5 function (callback) {
6 window.setTimeout(callback, 1000 / 60);
7 };
8 })();
9
10 var can = document.getElementById("canvas");
11 var cxt = can.getContext("2d");
12 can.width = window.innerWidth;
13 can.height = window.innerHeight;
14 cxt.lineWidth = 0.3;
15 //初始链接线条显示位置
16 var mousePosition = {
17 x: 30 * can.width / 100,
18 y: 30 * can.height / 100
19 }
20 //圆形粒子对象参数
21 var dots = {
22 n: 500,//圆形粒子个数
23 distance: 50,//圆形粒子之间的距离
24 d_radius: 100,//粒子距离鼠标点的距离
25 array: []//保存n个圆形粒子对象
26 }
27
28 var mouse = {
29 x: undefined,
30 y: undefined
31 }
32 window.addEventListener("mousemove", function (event) {
33 mouse.x = event.x;
34 mouse.y = event.y;
35 });
36 window.addEventListener("resize", function () {
37 can.width = window.innerWidth;
38 can.height = window.innerHeight;
39 });
40 window.addEventListener("mouseout", function () {
41 mouse.x = can.width / 2;
42 mouse.y = can.height / 2;
43 });
44
45 //创建随即颜色值
46 function colorValue(min) {
47 return Math.floor(Math.random() * 255 + min);
48 }
49
50 function createColorStyle(r, g, b) {
51 return "rgba(" + r + "," + g + "," + b + ", 1)";
52 }
53
54 //混合两个圆形粒子的颜色
55 function mixConnect(c1, r1, c2, r2) {//圆的颜色 半径
56 return (c1 * r1 + c2 * r2) / (r1 + r2);
57 };
58
59 //生成线条的颜色
60 function lineColor(dot1, dot2) {//获取具体的圆的颜色再计算
61 var color1 = dot1.color,
62 color2 = dot2.color;
63 var r = mixConnect(color1.r, dot1.radius, color2.r, dot2.radius);
64 var g = mixConnect(color1.g, dot1.radius, color2.g, dot2.radius);
65 var b = mixConnect(color1.b, dot1.radius, color2.b, dot2.radius);
66 return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
67 }
68
69 //生成圆形粒子的颜色对象
70 function Color(min) {
71 min = min || 0;
72 this.r = colorValue(min);
73 this.g = colorValue(min);
74 this.b = colorValue(min);
75 this.style = createColorStyle(this.r, this.g, this.b);
76 }
77
78 //创建圆形粒子对象
79 function Dot() {
80 //圆形粒子随机圆心坐标点
81 this.x = Math.random() * can.width;
82 this.y = Math.random() * can.height;
83 //x y 方向运动的速度值
84 this.vx = -0.5 + Math.random();
85 this.vy = -0.5 + Math.random();
86
87 this.radius = Math.random() * 5;
88 //this.color = "#ff3333";
89 this.color = new Color();
90 }
91
92 //绘制出圆形粒子
93 Dot.prototype.draw = function () {
94 cxt.beginPath();
95 cxt.fillStyle = this.color.style;
96 cxt.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
97 cxt.fill();
98 }
99
100 //添加圆形粒子
101 function createCircle() {
102 for (var i = 0; i < dots.n; i++) {
103 dots.array.push(new Dot());
104 }
105 }
106
107 //绘制出圆形粒子
108 function drawDots() {
109 for (var i = 0; i < dots.n; i++) {
110 var dot = dots.array[i];
111 dot.draw();
112 }
113 }
114
115 //drawDots();
116 //移动
117 function moveDots() {
118 for (var i = 0; i < dots.n; i++) {
119 var dot = dots.array[i];
120 //当圆形粒子对象碰壁的时候就反弹回来
121 if (dot.y < 0 || dot.y > can.height) {
122 dot.vx = dot.vx;
123 dot.vy = -dot.vy;
124 } else if (dot.x < 0 || dot.x > can.width) {
125 dot.vx = -dot.vx;
126 dot.vy = dot.vy;
127 }
128 //给圆形粒子圆心坐标加上速度值移动圆形粒子
129 dot.x += dot.vx;
130 dot.y += dot.vy;
131 }
132 }
133
134 //链接粒子对象
135 function connectDots() {
136 for (var i = 0; i < dots.n; i++) {
137 for (var j = 0; j < dots.n; j++) {
138 iDot = dots.array[i];
139 jDot = dots.array[j];
140 if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance) {
141 if ((iDot.x - mouse.x) < dots.d_radius && (iDot.y - mouse.y) < dots.d_radius && (iDot.x - mouse.x) > -dots.d_radius && (iDot.y - mouse.y) > -dots.d_radius) {
142 cxt.beginPath();
143 //cxt.strokeStyle = "yellow";
144 cxt.strokeStyle = lineColor(iDot, jDot);
145 cxt.moveTo(iDot.x, iDot.y);
146 cxt.lineTo(jDot.x, jDot.y);
147 cxt.closePath();
148 cxt.stroke();
149 }
150
151 }
152 }
153 }
154 }
155
156 createCircle();
157 //让圆形粒子不断的移动
158 function animateDots() {
159 cxt.clearRect(0, 0, can.width, can.height);
160 moveDots();
161 connectDots();
162 drawDots();
163 requestAnimFrame(animateDots);
164 }
165 animateDots();
个性化的菜单导航
1 <script>
2 $(function(){
3 $("#navList").append(‘<li><a id="blog_nav_other" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1241131.html">其它</a></li>‘);
4 $("#navList").append(‘<li><a id="blog_nav_dotnet" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1241130.html">Data Base</a></li>‘);
5 $("#navList").append(‘<li><a id="blog_nav_os" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1233201.html">Operating System</a></li>‘);
6 $("#navList").append(‘<li><a id="blog_nav_winapi" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1115473.html">WinApi</a></li>‘);
7 $("#navList").append(‘<li><a id="blog_nav_unity3d" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1076222.html">Unity3D</a></li>‘);
8 $("#navList").append(‘<li><a id="blog_nav_qt" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1208722.html">Qt</a></li>‘);
9 $("#navList").append(‘<li><a id="blog_nav_language" class="menu" rel="nofollow" href="#">编程语言</a><div id="sub_nav"><ul><li><a href="https://www.cnblogs.com/linxmouse/category/1208241.html">C++</a></li><li><a href="https://www.cnblogs.com/linxmouse/category/1121395.html">C#</a></li><li><a href="https://www.cnblogs.com/linxmouse/category/1078482.html">Python</a></li></ul></div></li>‘);
10 $("#navList").append(‘<li><a id="blog_nav_home" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse">首页</a></li>‘);
11 });
12 </script>
设置详情
选项详情
原文地址：https://www.cnblogs.com/linxmouse/p/9224461.html
时间： 2024-10-15 18:29:26