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

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

一.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="" style="z-index: -1">';
        };
        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;
}

五,效果展現

鼠標沒有移動上面

鼠標移動上面