PbootCMS建站博客

PB教程、PB网站模板、PB插件。

QQ快捷登录

PbootCMS建站交流群

博主：孽 (云趣科技)
QQ：
微信：dylanv
业务：切图,建站,二开,运维

回复时间：工作日下午4点30以后；周六周日不限。

文章目录

用CSS做一个流光溢彩的文字特效

CMS博客 2020-04-15 16:11 前端笔记 5402

【野卡】2分钟拥有海外虚拟信用卡，畅享全球AI服务！

前言

之前看到一个网站的文字特效，觉得很酷，

先看图：

我这个静态截图看不出滚动效果，也懒的截GIF啦。

我们动手来实现一下效果。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CMS建站爱好者交流平台</title>
    <style>
        body{ background: #222;}
        *{margin: 0;padding: 0;}
        ._borderWrap{
            width: 580px;
            height: 150px;
            position: absolute;
            left: 23%;
            top: 25%;
        }
        ._border{
            line-height: 145px;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
            -webkit-text-fill-color: transparent;
            background-image:  -webkit-linear-gradient(left,#129835,#ece648 25%,#129835 50%,#F9E92B 75%,rgb(40, 150, 38));
            background-size: 200%,100%;
            -webkit-background-clip: text;
            -webkit-animation: word 0.5s linear infinite ;
        }
        @keyframes word {
            0%{background-position: 0 0}
            100%{background-position: -100% 0}
        }
    </style>
</head>
<body>
        <div class="_borderWrap">
            <div class="_border">CMS建站爱好者交流平台</div>
        </div>
</body>
</html>

将上面的代码复制，然后保存在记事本中，将扩展名修改为.html，使用浏览器打开即可看到CSS制作的流光溢彩的文字效果咯。

酷不酷，学习一下。