博客园美化首页随笔展示美化

Posted 2022-07-28 pythonywy

博客园美化首页随笔展示美化

一.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;

五,效果展示

鼠标没有移动上面

鼠标移动上面