css3 文字流光效果

最新推荐文章于 2024-06-03 16:33:41 发布

DanielZhou1

最新推荐文章于 2024-06-03 16:33:41 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_42042250/article/details/90257946

版权

1 text-fill-color会覆盖color所定义的字体颜色：

text-fill-color:#f00;
color:#000;

2 text-fill-color打造镂空文字：

-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #000;

3 给文字加背景并裁剪

background-image:-webkit-linear-gradient(#eee,#000);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke:1px #000;

4 效果代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            @-webkit-keyframes masked-animation {
                0% {
                    background-position: 0 0
                }
                to {
                    background-position: -100% 0
                }
            }
            
            p {
                margin: 200px auto;
                width: 400px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: #fff;
                font-weight: 800;
                font-size: 50px;
                background-image: -webkit-linear-gradient(left, #cddc39, #ff9800 25%, #cddc39 50%, #ff9800 75%, #cddc39);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 2s infinite linear;
            }
            
            p:hover {
                -webkit-animation: masked-animation 0.5s infinite linear;
            }
        </style>
    </head>
    <body>
        <p>文字流光效果</p>
    </body>
</html>

DanielZhou1

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 文字流光效果

1text-fill-color会覆盖color所定义的字体颜色：text-fill-color:#f00;color:#000;2text-fill-color打造镂空文字：-webkit-text-fill-color:transparent;-webkit-text-stroke:1px #000;3 给文字加背景并裁剪background-image:...
复制链接

扫一扫