其他代码

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

也想出现在这里?联系我们
面包多

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

  1. <div class= "wrapper">
  2.   <div class= "text" data-text= "2020">2020</div>
  3. <div>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. .wrapper{
  2.   background: #252854;
  3.   width: 100%;
  4.   height:500px;
  5.   border-radius: 5px;
  6.   position: relative;  
  7. }
  8. .text{
  9.   flex: 0 0 100%;
  10.   font-size: 14rem;
  11.   font-weight: 900;
  12.   color: #00000000;
  13.   text-align: center;
  14.   font-family: 'Lato', sans-serif;
  15.   position: absolute;
  16.   left: 50%;
  17.   top: 50%;
  18.   transform: translate(-50%, -50%);
  19.   border-bottom: 1px solid #d4d7ff;
  20.   border-top: 1px solid #d4d7ff;
  21.   background: url(./img/source.gif);
  22.   background-clip: text;
  23.   -webkit-background-clip: text;
  24. }
  25.  
  26.  .text:after{
  27.    content: attr(data-text);
  28.    -webkit-text-stroke: 1.5px #d4d7ff;
  29.    position: absolute;
  30.    left: 50%;
  31.    top: 50%;
  32.    transform: translate(-50%, -49%);
  33.    background: url(./img/source.gif);
  34.    background-clip: text;
  35.    -webkit-background-clip: text;
  36.    background-size: 43%;
  37.  
  38. }
也想出现在这里?联系我们
创客主机

Codepen 网址:https://codepen.io/TajShireen/pen/wvBmXVN

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Ashade - 作品展示摄影相册WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

嘿,欢迎咨询!