背景的炫酷动态背景字体

来源：蜘蛛抓取(WebSpider) 时间：2019-05-31 17:17 标签： 动态背景

超过10,267,906名用户加入摄图网畅享商用蝂权

验证码登录 账号密码登录

验证码注册 账号密码注册

搜索到15098个与文字背景相符的作品（最多展示100页）

想要更精准搜索请用搜索排除功能，例如搜索：“春节 -”可显示不包含“2017”和“2016”的春节素材

这是一组效果非常炫酷的网页介紹标题文字动画特效这组文字动画效果共有8种效果，分别为弹性效果文字剪裁效果，文字遮罩效果视觉差效果，反转效果文字缩放效果和全屏视频背景效果。

所有文字动画效果的HTML结构都非常简单：使用一个section.cd-intro作为容器里面的div.cd-intro-content是用于制作标题文字动画效果的内容。

默認情况下标题文本的内容是隐藏的，它通过设置opacity属性为0实现然后会使用 Animation来使其产生动画效果。

对于视频背景效果在HTML标签中有一个div.cd-bg-video-wrapper元素，它用于包裹背景视频（视频是通过Javascript 动态背景加载的）

另外，在<h1>元素中还插入了两个元素：.svg-mask和.svg-mask-mobile这两个svg用于创建标题透明效果（第一個是在大屏幕上使用，第二个是在小屏幕中使用的）

这个网页介绍标题文字动画特效是完全使用CSS来制作的。

代码仅仅是为了加载最后一種效果中的视频文件它仅会在屏幕宽度大于768像素的时候加载全屏的背景视频。它通过在div.cd-bg-video-wrapper元素上的data-video来查找视频文件

我要回帖

更多关于 动态背景 的文章

 

随机推荐