AI文章摘要的美化，自定义CSS样式！AI渐变色、液态玻璃、动效、适配暗色模式。-Appstoy

本文介绍如何通过自定义 CSS 在 WordPress 网站中美化 AI 生成的摘要模块，使其呈现现代 AI 风格的渐变色背景、液态玻璃效果及动态光效。该样式同时适配亮色与暗色模式，并针对移动端进行了优化。

代码可直接通过主题设置、WordPress 额外 CSS 或子主题等方式添加。摘要样式在前台浏览时生效，后台编辑界面不会显示。

上一篇文章给大家介绍了，如何通过 Nvidia 的 AI 来实现 WordPress 文章的 AI 自动分类、打标签、生成摘要。

免费为WordPress配置AI，生成文章开头的内容摘要。OpenAI, DeepSeek, Kimi

6天前

1465

有小伙伴问我，我的首页的摘要部分的样式是如何设置的。

因为他们发现默认的摘要的样式只是类似于引文的那种，但是我的样式不仅有动效，而且是类似于现代AI的渐变色的背景，还有苹果iOS 26液态玻璃的效果。甚至还适配亮色模式和暗色模式。

今天教大家如何实现我的这个样式，非常简单。

自定义代码

你可以通过任意一种方式来实现自定义CSS代码的添加。

主题自带自定义 CSS：直接在主题设置或主题后台添加 CSS，是最简单、最推荐的方式。
WordPress「额外 CSS」：通过「外观 → 自定义 → 额外 CSS」添加样式，无需修改主题文件。
子主题 style.css：在子主题的 style.css 中编写 CSS，适合长期维护且不会因主题更新丢失。
自定义 CSS 插件：使用 Simple Custom CSS、Code Snippets（配合 CSS）等插件统一管理样式。
……

像我一样，我是直接在我的主题上面的自定义 CSS 部分添加了代码。

代码如下你可以直接复制。

/* =====================================================
   AI 阅读摘要 Pro @appstoy.com
   Apple Intelligence + Liquid Glass + Aurora AI
===================================================== */


.ai-summarization-summary {


position:relative;

margin:35px 0;

padding:0!important;

border-radius:28px;

overflow:hidden;

isolation:isolate;


/* AI 玻璃层 */

background:

linear-gradient(
135deg,
rgba(255,255,255,.78),
rgba(245,247,255,.55)
);


backdrop-filter:

blur(30px)

saturate(180%);


-webkit-backdrop-filter:

blur(30px)

saturate(180%);



border:

1px solid rgba(255,255,255,.85);



box-shadow:

inset 0 1px 2px rgba(255,255,255,.9),

inset 0 -30px 60px rgba(99,102,241,.08),

0 25px 80px rgba(99,102,241,.12);



animation:

aiCardEnter .8s cubic-bezier(.2,.8,.2,1);


}



/* =====================================================
   AI Aurora 神经流体背景
===================================================== */


.ai-summarization-summary::before{


content:"";


position:absolute;


inset:-120px;


z-index:-2;



background:


radial-gradient(
circle at 15% 20%,
rgba(99,102,241,.45),
transparent 40%
),


radial-gradient(
circle at 85% 25%,
rgba(236,72,153,.35),
transparent 42%
),


radial-gradient(
circle at 70% 85%,
rgba(14,165,233,.35),
transparent 45%
),


radial-gradient(
circle at 30% 90%,
rgba(250,204,21,.22),
transparent 40%
);



filter:

blur(50px);



opacity:.75;



animation:

aiAuroraMove 15s infinite alternate ease-in-out;


}



@keyframes aiAuroraMove{


0%{

transform:

translate(-40px,-30px)

scale(1);

}


50%{

transform:

translate(40px,20px)

scale(1.12);


}


100%{

transform:

translate(-20px,40px)

scale(1);


}

}





/* =====================================================
   AI 扫描光线
===================================================== */


.ai-summarization-summary::after{


content:"";


position:absolute;


top:0;


left:-150%;


width:80%;


height:100%;


z-index:2;


background:


linear-gradient(

120deg,

transparent,

rgba(255,255,255,.5),

transparent

);



transform:

skewX(-20deg);



animation:

aiScan 7s infinite;



pointer-events:none;


}



@keyframes aiScan{


0%{

left:-150%;

}


35%{

left:150%;

}


100%{

left:150%;

}


}





/* =====================================================
   内容区域
===================================================== */


.ai-summarization-summary
.wp-block-group__inner-container{


position:relative;

z-index:5;


padding:

28px 32px 32px;


}





/* =====================================================
   AI 标题胶囊
===================================================== */


.ai-summarization-summary
.wp-block-group__inner-container::before{


content:"✨ AI 智能生成摘要";


display:flex;


align-items:center;


gap:6px;


width:max-content;



margin-bottom:22px;



padding:

8px 18px;



border-radius:999px;



font-size:13px;



font-weight:700;



color:#6366f1;



background:

rgba(255,255,255,.55);



border:

1px solid rgba(255,255,255,.8);



box-shadow:


0 0 20px rgba(99,102,241,.18),


inset 0 1px 2px rgba(255,255,255,.8);



animation:

aiPulse 3s infinite;


}





@keyframes aiPulse{


0%,100%{

box-shadow:

0 0 15px rgba(99,102,241,.15);

}


50%{

box-shadow:

0 0 35px rgba(139,92,246,.35);

}


}






/* =====================================================
   AI 内容文字
===================================================== */


.ai-summarization-summary p{


position:relative;


margin:

0 0 18px;


padding-left:25px;



font-size:15px;


line-height:1.95;


letter-spacing:.15px;


color:#374151;



opacity:0;



animation:

aiTextGenerate .8s forwards;


}





.ai-summarization-summary p:nth-child(2){


animation-delay:.35s;


}





/* AI 神经节点 */

.ai-summarization-summary p::before{


content:"";


position:absolute;


left:0;


top:10px;



width:5px;


height:24px;



border-radius:20px;



background:


linear-gradient(

180deg,

#6366f1,

#ec4899

);



box-shadow:


0 0 20px rgba(139,92,246,.7);



animation:

aiNode 2s infinite;


}




@keyframes aiNode{


0%,100%{

transform:scaleY(.8);

opacity:.7;

}


50%{

transform:scaleY(1.25);

opacity:1;

}


}





@keyframes aiTextGenerate{


from{


opacity:0;


transform:

translateY(18px);


}


to{


opacity:1;


transform:none;


}


}





@keyframes aiCardEnter{


from{


opacity:0;


transform:

translateY(30px)

scale(.96);


}



to{


opacity:1;


transform:none;


}


}






/* =====================================================
   暗色模式 Zibll
===================================================== */


body.dark-theme
.ai-summarization-summary{


background:


linear-gradient(

135deg,

rgba(40,43,65,.75),

rgba(15,18,30,.85)

);



border-color:

rgba(255,255,255,.18);



box-shadow:


inset 0 1px 2px rgba(255,255,255,.15),


0 25px 80px rgba(0,0,0,.45);


}



body.dark-theme
.ai-summarization-summary p{


color:#e5e7eb;


}



body.dark-theme
.ai-summarization-summary
.wp-block-group__inner-container::before{


color:#ddd6fe;



background:

rgba(255,255,255,.12);


}




/* =====================================================
   手机适配
===================================================== */


@media(max-width:768px){


.ai-summarization-summary{


border-radius:22px;


}



.ai-summarization-summary
.wp-block-group__inner-container{


padding:

22px 18px;


}



.ai-summarization-summary p{


font-size:14px;


padding-left:18px;


}


}

添加之后保存就可以生效了。如果你已经安装了类似于 WP Rocket 这样的缓存插件，可以刷新并清除一下缓存，再打开页面尝试。

这样之后，每一次你生成的文章摘要都会有这个精美的样式了。

值得注意的是，你在后台编辑的时候，这个样式并不会生效。不用担心，在前台用户查看文章的时候，它是可以生效的。

OK，快去试试吧，有任何问题可以在评论区进行留言。

THE END