大数跨境
0
0

如何让国际站标题变成彩色样式酷炫动起来

如何让国际站标题变成彩色样式酷炫动起来 跨境E站
2024-07-24
37
导读:看到大家在讨论有家店铺的标题都是彩色的动态css样式效果,但是普通商家无法编写CSS进行调用的。那么如何实现标题彩色动起来的效果呢?

如何实现产品标题彩色动态效果?

有商家发现部分店铺的产品标题具有彩色动态效果,但普通商家无法直接通过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代码的特性,在普通编辑模式下即可实现动态标题效果。

【声明】内容源于网络
0
0
跨境E站
各类跨境出海行业相关资讯
内容 193
粉丝 0
跨境E站 各类跨境出海行业相关资讯
总阅读2.7k
粉丝0
内容193