<em id="ii1f9"></em>

    <ruby id="ii1f9"><p id="ii1f9"><tt id="ii1f9"></tt></p></ruby>
      <li id="ii1f9"></li>
      1. <rp id="ii1f9"></rp>

        <s id="ii1f9"><strike id="ii1f9"><u id="ii1f9"></u></strike></s>

        1. <tbody id="ii1f9"><center id="ii1f9"></center></tbody>
        2. Menu

          10个惊人的动画文本CSS和JavaScript代码片段

          <返回列表

          你可以用基本的CSS和几行JavaScript制作一些非常炫目的文本效果。这些效果的范围从文本显示动画到三维旋转或任何你能想象到的东西。

          在这篇文章中,我列举了10个网络上最酷的例子,展示了你只需要一点样式化的文本和CSS代码就可以做什么。

          你可能也喜欢这些CSS动画工具 .

          1.标题动画

          罗宾·特雷尔的这部动画片名效果沿袭了许多电影或电子游戏的风格。字母采用了突出的三维效果使用CSS3文本阴影和轻微的对角线倾斜。

          淡入动画风格让我想起了20世纪30年代的经典电影,同样的倾斜文本。一切都是通过CSS控制的,但是“重启”按钮是用JavaScript构建的。这样,可以多次播放动画以获得更好的效果。

          2.粉碎

          用After Effects之类的工具创建破碎的文本是一项简单的任务,但是用代码创建文本破碎动画要困难得多,这使得arsenzbidniakov的这支笔给人留下了深刻的印象。

          文本实际上是用SVG形状这使得动画制作过程更容易一些。这也意味着你不能像平常一样选择、复制或与文本交互。

          如果你能用你的网站添加类似的效果为了一个标志或其他非交互式页面元素。

          3.扭曲的字母

          开发人员Mamun Khandaker将这些扭曲字母动画集合在一起。每个动画样式都有不同的名称,您可以在这支笔中浏览它们。

          我可以看到这些文本效果在工具/网络应用程序的登录页或主页上使用。这些会立即引起人们的注意,并给来访者留下持久的印象。此外,它们都是100%纯CSS和超级容易调整。

          4.像素字母表

          这种独特的动画像素效果绝对是奇怪的,但奇怪的是令人着迷。它主要依赖于JavaScript,是由开发人员georginikoloff创建的HTML5画布元素

          它使用 衬线音符将字母转换为画布元素内的可延展元素。JavaScript将字母分解成更小的点,这些点将构成动画的基础。

          我不能说这会有多大的实际用途,但它证明了网络动画已经走了多远。

          5.打字转盘

          这种效应在小型投资组合和机构网站上非常流行。打字文本动画通常出现在网站的标题中,它模仿了在文字处理器中打字的人的样子。

          所有的东西都包含在一个元素中,并且很好地混合了CSS和JavaScript动画。有时候你会看到网站用这个来列出他们工作的描述,或者他们的历史,或者他们曾经合作过的客户。

          这绝对是一个有趣的效果使用适度. 因为一次只能看到一个单词,这确实限制了页面的可读性,但是如果使用得少,这是一个非常酷的效果,任何人都可以复制。

          6.大腿大腿

          借用威廉·布莱克的诗《泰格》,约瑟夫·马图奇的这部非常独特的动画确实吸引了你的注意力。

          这里的重点不是内容,而是排版风格和动画。文本的每个“段”都有自己的样式,具有文本轮廓和发光效果。这是一个很好的例子,说明了如何设置主页的样式,从而使用setTimeout() .

          7.快照SVG

          开源快照.svg这个库允许任何人只用一点代码就可以创建高分辨率的SVG图像。这比学习像Illustrator这样的程序要容易得多,它可以让你像这个有趣的例子由亚历克西斯·布隆丁创作。

          所有字母都是通过JavaScript动态创建的,包括动画中使用的随机字符。现代SVG支持是巨大的,这些图像类型可以从根本上改变我们在未来几年建立网站的方式。这个Snap.svg动画只是一个例子,绝对是一个很酷的例子。

          8.括号动画

          这是我经常看到的另一种相当常见的文本动画技术。它使用括号和旋转的文本几乎像一个rolodex在页面上。

          这个动画模仿了我前面提到的打字旋转木马效果,只是可以用CSS制作。它依赖于一个自定义循环动画,从一个CSS关键帧移动到另一个CSS关键帧,每个帧在旋转文本中显示不同的单词或短语。

          我发现这个效果更微妙,更容易在主页上阅读。如果你想为你的主页寻找一些很酷的文本效果,这将是一个很好的选择。

          9.牢不可破的金米·施密特

          这个甜美的logo效果是从Netflix系列“牢不可破的Kimmie Schmidt”中借用的。一切都是用CSS创建的,包括文本样式和自定义动画。

          使用一个附加到页面的类来初始化页面。从那里开始,一切都是纯粹的CSS。它主要使用一组变换来创建令人惊讶的真实反弹效果。

          这是另一个CSS3可以做多少的例子,如果你知道的话如何使用它 .

          10.填充SVG文本

          最后,我们来看看这个非常独特的SVG填充动画,它混合了方框阴影和CSS笔划属性 .

          这个文本完全是用SVG构建的,但是它也是可选的,所以你可以像普通文本一样复制/粘贴字母。它完全兼容所有浏览器,而且动画非常精细,适合任何网站。

          所有这些文本动画都给表格带来了一些新的东西。在你自己的工作中,你可能不会发现它们都是实用的或有用的,但它们证明了只要采用正确的方法,几乎任何事情都是可能的。


          最新网站设计资讯
          企业网站建设

          企业网站建设优化一条龙,多年品牌网站设计,营销网站开发,手机网站制作,响应式网站设计

          联系我们

          电话:18868949445QQ:1611387063 邮箱:[email protected]

          联系云轩总监微信

          微信
          一本大道香蕉久在线播放29