如何实现产品标题彩色动态效果?
有商家发现部分店铺的产品标题具有彩色动态效果,但普通商家无法直接通过CSS实现。其实操作方法非常简单。
① 打开产品编辑页面,切换至“普通编辑”模式。
② 点击工具栏中的“源代码”按钮,进入源码编辑模式。
③ 在产品详情源代码最前方(请勿删除原有内容),插入以下CSS代码:
<style>
/* */
h1 {
background: -webkit-linear-gradient(135deg,
#0eaf6d,
#ff6ac6 25%,
#147b96 50%,
#e6d205 55%,
#2cc4e0 60%,
#8b2ce0 80%,
#ff6384 95%,
#08dfb4);
/* */
-webkit-text-fill-color: transparent;
/* */
-webkit-background-clip: text;
/* */
-webkit-background-size: 200% 100%;
/* flowCss 12*/
-webkit-animation: flowCss 12s infinite linear;
}
@-webkit-keyframes flowCss {
0% {
/* */
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
}
h1:hover {
-webkit-animation: flowCss 40s infinite linear;
}
</style>
④ 插入后,直接提交产品信息,切记不要点击“源代码编辑”返回可视化编辑模式,否则代码可能失效。
该方法利用内联样式支持HTML代码的特性,在普通编辑模式下即可实现动态标题效果。


