AI摘要

本文分享了一段简单的CSS代码，通过在子比主题后台自定义CSS处添加，即可实现适配夜间模式的幻灯片与页面过渡效果美化，且参数可根据幻灯片高度自行调整。

一个小小的改动可以让网站看起来美观一些，这个目前应该还没人用在子比主题上，其实就是一段简单的CSS既可实现此效果，这里适配了跟随主题颜色，夜间模式下也不会感觉到突兀，在狐狸那里看见今天就分享给大家！

效果图：

PixPin_2024-07-30_23-05-17
过渡效果

代码教程：

[hidecontent type="reply"]

代码投放：网站后台 -> Zibll主题设置 -> 全局&功能 -> 自定义代码 -> 自定义CSS样式

/*幻灯片过渡效果 blog.beicb.top*/
.absolute::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 58%;
    right: 0;
    bottom: 0;
    transform: scale(1.01);
    background: linear-gradient(180deg, rgb(255 255 255 / 0%) 0%, var(--body-bg-color) 100%);
}

其中 top: 58%; 根据你的幻灯片高度进行调整。

[/hidecontent]