流光溢彩的字体

最新推荐文章于 2023-11-27 14:09:07 发布

luo15256533579

最新推荐文章于 2023-11-27 14:09:07 发布

阅读量554

点赞数

分类专栏：颜色会流动的字体文章标签：颜色流动的字体

本文链接：https://blog.csdn.net/luo15256533579/article/details/78668523

版权

颜色会流动的字体专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 200px;
            font-size: 40px;
            font-weight: bold;
            -webkit-background-clip: text;
            background-image: linear-gradient(90deg,red,blue,red,blue,red);
            background-size: 200% 100%;
            color: transparent;
            animation:luo 2s linear infinite;
        }
        @keyframes luo{
            form{background-position:0% ;}
            to{background-position: 100% ;}}
        }
    </style>
</head>
<body>
    <div>我们不一样</div>
</body>
</html>

主要是用下面几个CSS属性实现的：

background-image
-webkit-background-clip
-webkit-text-fill-color
background-size
animation

具体实现

绘制渐变背景图

background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
使用CSS3的渐变绘制图像，从左到右。
需要注意的是颜色是 0到49%的颜色组 = 50%到99%的颜色组，且最后100%的颜色要和开头0的颜色相等
这是为了能无缝衔接流光效果, 之后有说到

裁剪背景图

-webkit-background-clip: text;
使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图

设置字体颜色

-webkit-text-fill-color: transparent; or color: transparent;
将字体颜色设置成透明，这样就能将背景图显示出来了

设置背景图长度

background-size: 200% 100%;
将背景图宽度拉长至两倍，之前设置background-image的两份相同的颜色组，就是为了能在此拉长后只显示一份颜色组，另外超出的半截颜色组用来实现流光效果

开始动画

animation: streamer 5s infinite linear;

@keyframes streamer {
    0%  {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

最后通过动画改变背景图的位置实现流光效果

luo15256533579

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
流光溢彩的字体

Document div{ width: 200px; font-size: 40px; font-weight: bold; -webkit-background-clip: text; background-image: linear-gradien
复制链接

扫一扫