子比主题美化-文章列表悬停萝莉

慕白

2024-11-2

子比美化

觉得丑，不好看，毫无用处就不要评论看代码了，不要出来当显眼包

效果展示

子比主题美化-文章列表悬停萝莉

教程开始

后台自定义代码——自定义css———直接放入CSS即可使用

样式一

.posts-item:not(article):hover {
    opacity: 1;
    z-index: 99;
    border-radius: 20px;
    transform: translateY(-5px);
    box-shadow: 0 5px 5px rgba(255, 41, 105, 0.2);
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

@keyframes index-link-active {
    0% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);
    }
    16% {
        transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);
    }
    100% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);
    }
}

@media screen and (min-width:980px) {
    .posts-row>*:hover {
        transition:all 0.3s;
        content: " ";
        right: -5px;
        background-size: contain;
        background-position: center right;
        background-image: url(/4.png);
        background-repeat: no-repeat;
    }
}

样式二

/*首页文章列表悬停可爱萝莉*/
@media screen and (min-width:980px) {
.tab-content .posts-row>*:hover {
    transition:all 0.3s;
    content: " ";
    right: -50px;
    background-size: contain;
    background-position: center right;
    background-image: url(/4.png);
    background-repeat: no-repeat;
}
}