CSS3剪裁GIF背景图片动画特效
html：
<div class="text" data-text="2022">2022</div>
CSS样式：
<title>CSS3剪裁GIF背景图片动画特效</title>
<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: 15rem;
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/1.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/1.gif');
background-clip: text;
-webkit-background-clip: text;
background-size: 43%;
}
</style>
预览效果:
