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>
