当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 博客园美化首页随笔展示美化

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

2019年08月18日  | 移动技术网IT编程  | 我要评论

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

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

五,效果展示

鼠标没有移动上面

鼠标移动上面

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网