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

插件介绍

这是一款css剪裁GIF背景图片动画特效。该特效利用css的background-clip技术，将gif图片剪裁为文字效果，非常炫酷。

使用方法

HTML结构

CSS样式

.wrapper{

background: #252854;

width: 100%;

height:500px;

border-radius: 5px;

position: relative;

}

.text{

flex: 0 0 100%;

font-size: 14rem;

font-weight: 900;

color: #00000000;

text-align: center;

font-family: 'Lato', sans-serif;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

border-bottom: 1px solid #d4d7ff;

border-top: 1px solid #d4d7ff;

background: url(./img/source.gif);

background-clip: text;

-webkit-background-clip: text;

}

.text:after{

content: attr(data-text);

-webkit-text-stroke: 1.5px #d4d7ff;

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%;

}

浏览器兼容性

结语

以上就是关于css剪裁GIF背景图片动画特效的全部内容，喜欢的朋友右侧可以下载。