css3文字流光效果

文字流光效果，知识点：

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

text-fill-color:#f00;

color:#000;

（2）text-fill-color打造文字为透明色

-webkit-text-fill-color:transparent;

（3）给文字加背景并裁剪

background-image:-webkit-linear-gradient(#eee,#000);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

html:

<h1>web前端开发</h1>

css:

    <style>
        h1{
            width: 400px;
            height: 100px;
            line-height: 100px;
            color: hsla(0, 0%, 100%, .65);
            font-size: 50px;
            font-weight: 700;
            background-image: linear-gradient(to left,#cddc39,#ff9800 25%,#ff9800 75%,#cddc39);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size:200% 100%;
            -webkit-animation: masked-animation 2s linear infinite;
        }
        h1:hover{
            -webkit-animation: masked-animation 0.5s linear infinite;
        }
        @-webkit-keyframes masked-animation{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -100% 0;
            }
        }
    </style>