CSS3剪裁GIF背景图片动画特效

CSS3剪裁GIF背景图片动画特效，知识点分析：

（1）content: attr(data-text);

css3 里面的content 可以使用动态内容结合html5的自定义属性,

格式：content:attr(data-text) data-text不可以加引号。

（2） 使用text-stroke属性来实现文本描边效果。

-webkit-text-stroke: 5.5px #ffd4d4;

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

text-fill-color:#f00;

color:#000;

（4）text-fill-color打造镂空文字

-webkit-text-fill-color:transparent;

-webkit-text-stroke:1px #000;

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

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

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

-webkit-text-stroke:1px #000;

html:

<div class="text" data-text="2021">2021</div>

css:

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #252854;
        }
        .text{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            flex: 0 0 100%;
            font-size: 14rem;
            font-weight: 900;
            color: #00000000;
            text-align: center;
            font-family: 'Lato', sans-serif;
            border-bottom: 1px solid #d4d7ff;
             border-top: 1px solid #d4d7ff;
            background: url(./img/source.gif);
            background-clip: text;
            -webkit-background-clip: text;
        }
         
         .text:after{
             /* 
             css3 里面的content 可以使用动态内容结合html5的自定义属性,
            格式：content:attr(data-text) data-text不可以加引号
             */
            content: attr(data-text);
            /* 使用text-stroke属性来实现文本描边效果 */
            -webkit-text-stroke: 5.5px #ffd4d4;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -49%);
            background: url('./img/source.gif');
            background-clip: text;
            -webkit-background-clip: text;
            background-size: 43%;
        }
    </style>