博客園美化首頁隨筆展示美化

一.css

.postDesc-img {
            position: absolute;
            padding-bottom: 0;
            float: right;
            right: 0;
            bottom: 0;
            z-index: -1;
        }


.cnblogs-post-body h3 {
    text-decoration: none;
    font-size: 10px;
    line-height: 1px;
}

.cnblogs-post-body h2 {
    color: red;
    font-size: 20px;

}

.day {
    padding: 54px 4% 2% 4%;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: all 0.35s;
    box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
    margin-bottom: 50px;
    margin-top: 0px;
}

.day:hover {
    transform: scale(1.02);
    box-shadow: 12px 12px 18px rgba(50, 50, 50, 0.4);
}

二.js

<script>
    let xx = document.querySelectorAll('.day');
    console.log(xx);
    let aa = document.querySelectorAll('.postDesc');
    for (let ii = 0; ii < xx.length; ii++) {
        xx[ii].onmousemove = function () {
            this.querySelector('.postDesc').innerHTML='<img class="postDesc-img" src="https://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_SUPERMAN.png" alt="">';
        };
        xx[ii].onmouseout = function () {
            for (let i = 0; i < aa.length; i++) {
                console.log(i);
                aa[i].innerHTML = '';
            }
        };
    }
</script>

三.缺點

1.超人圖片是博主自己ps的,可能隨筆展示大小不一樣會有點像素的變化,我處理後的圖片是290*130的

2.我是通過把'postDesc'類裡面替換成<img標簽>實現的,你們如果要保留原來的編輯來 可以稍微修改js即可,可以問我

3.樣式按照自己喜歡可以微調

4.滑鼠也是博主自己畫的

四.要是喜歡我的滑鼠樣式下麵這段css代碼

a:hover {
    cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_Hand.png), auto;
}

a:active {
    cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_AppStarting.png), auto;
}

a:focus {
    cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_wait.png), auto;
}

p, code {
    cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_IBeam.png), auto;
}

* {
    cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_Arrow.png), auto;
}

五,效果展示

滑鼠沒有移動上面

滑鼠移動上面