彩色镂空动态字体

Thekingyu

于 2022-11-28 16:52:02 发布

阅读量1.2k

点赞数 1

分类专栏：前端样式文章标签： css

本文链接：https://blog.csdn.net/Thekingyu/article/details/128082817

版权

前端样式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

主要属性为 background-clip: text; 字体镂空

配合渐变色在背后移动来实现

具体代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
</head>

<body>
    <div class="font">彩色动态镂空字体</div>
</body>
<style>
    .font {
        font-size:50px ;
        color: transparent;
        background: -webkit-linear-gradient(10deg,#7c3226 1%, #e57d6d 25%, #1b6788 50%, #ef00f7 75%, #7c3226 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: auto;
    }
        /* 滚动徐恰到好处，不然会顿一下，建议拉大position距离循环时间延长 */
    @keyframes fontline {
        0% {
            background-position: 0px;
        }

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

    .font {
        animation: fontline 10s infinite linear;
        -webkit-animation: fontline 10s infinite linear;
    }
</style>

</html>