详情
评论
问答

子比主题美化-增加卡片描边两个版本

适配其他卡片类区块

效果图

图片[1]-子比主题美化-增加卡片描边两个版本-柒小颜博客

CSS代码:

进阶版本CSS代码:

/* 默认状态 */

.posts-item:not(article) {

    border: 1px solid transparent;

    border-radius: 8px;

    padding: 16px;

    box-sizing: border-box;

    transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.5s ease;

}

/* 浅色模式悬停效果 */

.posts-item:not(article):hover {

    opacity: 1;

    z-index: 2;

    transform: translateY(-5px) scale(1.03); /* 微浮动放大 */

    border-color: #1976D2; /* 蓝色边框 */

    box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3);

    /* 双层阴影,更立体 */

}

/* 暗黑模式悬停效果 */

.dark-theme .posts-item:not(article):hover {

    opacity: 1;

    z-index: 2;

    transform: translateY(-5px) scale(1.03);

    border-color: #1976D2;

    box-shadow: 0 0 20px rgba(52,152,219,0.7), 0 4px 20px rgba(52,152,219,0.5);

}

/* 可选,给进入和离开时的小动画(如果你要更顺滑,可以加动画keyframes) */

@keyframes hover-glow {

  0% {

    box-shadow: 0 0 0 rgba(52,152,219,0);

    transform: translateY(0) scale(1);

  }

  100% {

    box-shadow: 0 0 20px rgba(52,152,219,0.5), 0 4px 20px rgba(52,152,219,0.3);

    transform: translateY(-5px) scale(1.03);

  }

}
温馨提示: 本文最后更新于2025-04-30 13:21:08,某些文章具有时效性,若有错误或已失效,请在下方留言或联系柒小颜博客
©文章版权归作者所有
THE END
喜欢就支持一下吧
点赞15赞赏 分享
评论 共1条

请登录后发表评论