子比主题 – 列表悬停动态气泡与边框样式

美化简介

这是一款子比主题类别动态气泡加上边框慢慢淡蓝色样式，这款样式是看到别人的站有这种效果，本篇适应于子比的所有列表，但是建议用：列表模式的，卡片的话有点臃肿不好看，喜欢的自行部署吧！

美化效果

代码部署

直接丢到：子比主题–>>自定义CSS样式即可！

/* 子比主题列表悬停动态气泡与边框样式 */
.posts-item {
    position: relative; 
    overflow: hidden;
    transition: all 0.3s ease; 
    border: 1px solid transparent;
    border-radius: 8px;
}
.posts-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    transform: translate(30px, -30px); 
    opacity: 0.1;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1; 
}
.posts-item:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

.posts-item:hover::before {
    opacity: 0.15;
    transform: translate(20px, -20px) scale(1.1); 
    transition: all 0.4s ease;
}