background-clip：css剪裁GIF背景图片动画特效

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

HTML结构

 <div class= "wrapper">
    <div class= "text" data-text= "晓风伴月">晓风伴月</div>
 <div>

CSS代码

.wrapper{
     background: #252854;
     width: 100%;
     height:500px;
     border-radius: 5px;
     position: relative;  
 }
 .text{
     flex: 0 0 100%;
     font-size: 10rem;
     font-weight: 900;
     text-align: center;
     font-family: 'Lato', sans-serif;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 800px;
     color: #00000000;
 }
 
 .text:after{
     content: attr(data-text);
     -webkit-text-stroke: 1.5px #d4d7ff;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -49%);
     background: url(./images/bg.gif);
     background-clip: text;
     -webkit-background-clip: text;
     background-size: 43%;
     width: 800px;
 }

background-clip: text

background-clip: text 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

简单而言，就是运用了 background-clip: text 的元素，其背景内容只保留文字所在区域部分，配合透明文字 color: transparent（color: #00000000;），就能够利用文字透出背景。

利用 background-clip: text，能够得到很多非常有意思的文字效果。