CSS代码做一个很酷流光溢彩的文字特效的教程

84次阅读

2024年04月19日 10:21:31

共计 721 个字符，预计需要花费 2 分钟才能阅读完成。

效果展示：

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>这个文字特效很酷啊</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>
            <div>这个文字特效很酷啊</div>
        </div>
</body>
</html>

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

正文完

网站建设

发表至：技术教程

2024年4月19日 10:21:31

0

转载说明：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。