网站美化-字体流光炫彩效果[CSS流光字体]-星雨博客

温馨提示：本文最后更新于2024-09-17 09:32:16，某些文章具有时效性，若有错误或已失效，请联系星雨站长！

样式一

今天在逛友链时，看到小枫博客里的流光字体挺好看的，动手扒了下来，效果感觉还不错，需要的自取！

演示效果

WWW.WNIUI.COM

CSS代码

.wniui-copy {
            font-weight: 700;
            background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
            animation: ran 20s linear infinite;
            -webkit-animation: ran 20s linear infinite;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text
        }

        @keyframes ran {
            0% {}

            100% {
                background-position: 2000px 0
            }
        }

样式二

这个是其它小伙伴找我要的，我也是在其它站点看到的，就顺手扒了一下，放这里了，喜欢的自取！

演示效果

WWW.WNIUI.COM

CSS代码

.wniui-copy {
            font-weight: 700;
            background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
            animation: ran 20s linear infinite;
            -webkit-animation: ran 20s linear infinite;
            color: transparent;
            background-clip: text;
            -webkit-background-clip: text
        }

        @keyframes ran {
            0% {}

            100% {
                background-position: 2000px 0
            }
        }