css剪裁GIF背景图片动画特效
目录
插件介绍
这是一款 css 剪裁 GIF 背景图片动画特效。该特效利用 css 的 background-clip 技术,将 gif 图片剪裁为文字效果,非常炫酷。
使用方法
HTML 结构
<div class= "wrapper"> <div class= "text" data-text= "2020">2020</div> <div>
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 背景图片动画特效的全部内容,喜欢的朋友右侧可以下载。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » css剪裁GIF背景图片动画特效
码云笔记 » css剪裁GIF背景图片动画特效