前端互嫖 - 博客园美化
博客园的皮肤要选择 CodingLife
页面定制 CSS 代码
网格纸背景
div.blogpost-body {
background-color: #FFFFFF;
background-repeat: repeat;
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;
}
国风背景图
body {
background-image: url(https://images.cnblogs.com/cnblogs_com/article-record/1664812/o_200310015152bolog.jpg);
background-repeat: repeat;
}
浏览器滚动条优化
/*代码框滚动条美化*/
::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-thumb{border-radius:1px;box-shadow:inset 0 0 5px #6D6E69;background:#61687C}::-webkit-scrollbar-track{background:0 0;border-radius:1px}
粉色导航栏
div#navigator {
background-color:#ff8688;
}
三级标题 (这里我做了一些取舍冗余的也没有删)
#cnblogs_post_body h4, .blog_comment_body h4,
#cnblogs_post_body h5, .blog_comment_body h5
#cnblogs_post_body h6, .blog_comment_body h6 {
color: inherit; line-height: inherit; padding: 0px; margin: 1.2em 0px; font-weight: bold; border-bottom: 2px solid #ef7060; font-size: 1.3em;font-size: 15px;
}
#cnblogs_post_body h3, .blog_comment_body h3{
font-size: 16px; line-height: inherit; margin: 0px; display: inline-block; font-weight: normal; background: #ef7060; color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin: 1.6em 0; margin-right: 3px;
}
页脚
#footer {
text-align: center;
min-height: 25px;
height: 25px;
border-top: 1px solid #ff8688;
margin-top: 10px;
padding-top: 10px;
padding-bottom:35px;
}
去掉大黑板
#blogTitle {
display: none;
}
这段我也不知道干嘛, 没有看(请原谅我)
/*头像和 猫和向日葵效果*/
#newsSideBar .headImage {
padding: auto;
}
#newsSideBar .headImage img {
border: 3px solid #2586d7;
border-radius: 50%;
width: 150px;
margin: auto;
display: block;
}
#pageBeginBar{
background-color: rgb(255,255,255,0.1);
height: 90px;
}
#pageBeginTitle {
background-color: rgb(255,255,255,0.1);
padding: 18px 20px 18px 70px;
text-align: left;
float: left
}
#pageBeginTitle a, #pageBeginTitle a:hover {
color: #ff8688;
text-decoration: none;
font-size: 30px;
font-weight: bold;
padding: 10px 15px 8px 15px;
display: block;
float: left;
outline: none
}
#pageBeginTitle span {
font-size: 16px;
font-weight: bold;
display: block;
float: left;
padding: 22px 20px 13px 10px;
}
/*----------------上面不要删除----------------------*/
.postTitle, .entrylistPosttitle {
padding-right: 64px;
padding-left: 10px;
border-left-width: 3px;
border-left-style: solid;
border-left-color: #008080;
font-weight: bold;
line-height: 1.5;
width: 100%;
color: #ff8688;
margin: 0px 0px;
}
代码高亮
.cnblogs-markdown .hljs{display:block;color:#333;overflow-x:auto;background:#F2F4F5!important;border:none!important;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;padding:1em!important;font-size:14px!important}.hljs-comment,.hljs-meta{color:#969896}.hljs-emphasis,.hljs-quote,.hljs-string,.hljs-strong,.hljs-template-variable,.hljs-variable{color:#df5000}.hljs-keyword,.hljs-selector-tag,.hljs-type{color:#a71d5d}.hljs-attribute,.hljs-bullet,.hljs-literal,.hljs-symbol{color:#0086b3}.hljs-name,.hljs-section{color:#63a35c}.hljs-tag{color:#333}.hljs-attr,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo,.hljs-title{color:#795da3}.hljs-addition{color:#55a532;background-color:#eaffea}.hljs-deletion{color:#bd2c00;background-color:#ffecec}.hljs-link{text-decoration:underline}
行内代码高亮
.post .postBody h1 code,.post .postBody h2 code,.post .postBody h3 code,.post .postBody h4 code,.post .postBody h5 code,.post .postBody h6 code,.post .postBody li code,.post .postBody p code{color:#61687C;line-height:1;font-family:consolas!important;vertical-align:middle;margin:0 3px;background:#fbfbfb!important;font-size:14px!important;padding:.2em .3em!important;border-radius:3px!important;border:1px solid #eee!important}
这是我自己随便捣拾捣拾
.dayTitle {
display: none;
}
.day {
transition: all 0.3s linear;
}
#ad_t2, #under_post_kb, #under_post_news,
.c_ad_block,
#blog-comments-placeholder {
display: none;
}
#sidebar_scorerank,
#sidebar_postarchive,
#sidebar_recentcomments,
#sidebar_topcommentedposts,
#sidebar_topdiggedposts {
display: none;
}
.sidebar-block ul li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#navList a:link {
text-shadow: 0px 0px 0px #000;
}
#navList a {
transition: all 0.3s linear;
}
页首 HTML 代码
<div id="pageBeginBar">
<div id="pageBeginTitle">
<a href="https://www.cnblogs.com/runtu/" >计算机相关人员</a>
<span>Look nice</span>
<div class="clear"></div>
</div>
</div>
页脚 HTML 代码
背景线动画
var home = document.getElementById('home');
var body = home.parentNode;
body.style.backgroundColor = '#F4F4F4';
! function () {
function n(n, e, t) {
return n.getAttribute(e) || t
}
function e(n) {
return document.getElementsByTagName(n)
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", .5),
c: n(i, "color", "0,0,0"),
n: n(i, "count", 99)
}
}
function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body
.clientHeight
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y <
0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[
e], null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m,
l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n
.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle =
"rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r
.stroke()))
}), x(i)
}
var a, c, u, m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window
.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (n) {
window.setTimeout(n, 1e3 / 45)
},
w = Math.random,
y = {
x: null,
y: null,
max: 2e4
};
m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0]
.appendChild(m), o(), window.onresize = o, window.onmousemove = function (n) {
n = n || window.event, y.x = n.clientX, y.y = n.clientY
}, window.onmouseout = function () {
y.x = null, y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1;
s.push({
x: h,
y: g,
xa: v,
ya: p,
max: 6e3
})
}
u = s.concat([y]), setTimeout(function () {
i()
}, 100)
}();
上吊的猫
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/article-record/szgotop.css" />
<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;"></div><script type="text/javascript" src="https://blog-static.cnblogs.com/files/article-record/szgotop.js"></script>
鼠标点击效果
<script type="text/javascript">
class Circle {
constructor({ origin, speed, color, angle, context }) {
this.origin = origin
this.position = { ...this.origin }
this.color = color
this.speed = speed
this.angle = angle
this.context = context
this.renderCount = 0
}
draw() {
this.context.fillStyle = this.color
this.context.beginPath()
this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
this.context.fill()
}
move() {
this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
this.renderCount++
}
}
class Boom {
constructor ({ origin, context, circleCount = 10, area }) {
this.origin = origin
this.context = context
this.circleCount = circleCount
this.area = area
this.stop = false
this.circles = []
}
randomArray(range) {
const length = range.length
const randomIndex = Math.floor(length * Math.random())
return range[randomIndex]
}
randomColor() {
const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
}
randomRange(start, end) {
return (end - start) * Math.random() + start
}
init() {
for(let i = 0; i < this.circleCount; i++) {
const circle = new Circle({
context: this.context,
origin: this.origin,
color: this.randomColor(),
angle: this.randomRange(Math.PI - 1, Math.PI + 1),
speed: this.randomRange(1, 6)
})
this.circles.push(circle)
}
}
move() {
this.circles.forEach((circle, index) => {
if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
return this.circles.splice(index, 1)
}
circle.move()
})
if (this.circles.length == 0) {
this.stop = true
}
}
draw() {
this.circles.forEach(circle => circle.draw())
}
}
class CursorSpecialEffects {
constructor() {
this.computerCanvas = document.createElement('canvas')
this.renderCanvas = document.createElement('canvas')
this.computerContext = this.computerCanvas.getContext('2d')
this.renderContext = this.renderCanvas.getContext('2d')
this.globalWidth = window.innerWidth
this.globalHeight = window.innerHeight
this.booms = []
this.running = false
}
handleMouseDown(e) {
const boom = new Boom({
origin: { x: e.clientX, y: e.clientY },
context: this.computerContext,
area: {
width: this.globalWidth,
height: this.globalHeight
}
})
boom.init()
this.booms.push(boom)
this.running || this.run()
}
handlePageHide() {
this.booms = []
this.running = false
}
init() {
const style = this.renderCanvas.style
style.position = 'fixed'
style.top = style.left = 0
style.zIndex = '999999999999999999999999999999999999999999'
style.pointerEvents = 'none'
style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
document.body.append(this.renderCanvas)
window.addEventListener('mousedown', this.handleMouseDown.bind(this))
window.addEventListener('pagehide', this.handlePageHide.bind(this))
}
run() {
this.running = true
if (this.booms.length == 0) {
return this.running = false
}
requestAnimationFrame(this.run.bind(this))
this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
this.booms.forEach((boom, index) => {
if (boom.stop) {
return this.booms.splice(index, 1)
}
boom.move()
boom.draw()
})
this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
}
}
const cursorSpecialEffects = new CursorSpecialEffects()
cursorSpecialEffects.init()
</script>
总结: 我也是直接复制,再修改,大家也没有必要非要知道每一段是干嘛的!开心就好