子比主题 – 列表悬停动态气泡与边框样式
这是一款子比主题类别动态气泡加上边框慢慢淡蓝色样式，这款样式是看到别人的站有这种效果，本篇适应于子比的所有列表，但是建议用：列表模式的，卡片的话有点臃肿不好看，喜欢的自行部署吧！代码部署
直接丢到：子比主题–>>自定义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;
}
页:
[1]