前端互嫖 - 博客园美化

博客园的皮肤要选择 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;
}

粉色导航栏

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.6em 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>

总结： 我也是直接复制，再修改，大家也没有必要非要知道每一段是干嘛的！开心就好