阅读更多

1顶
0踩

Web前端

原创新闻 7款超华丽的HTML5 Canvas文字动画特效

2017-11-06 09:18 by 见习记者 sxwgf001 评论(1) 有16222人浏览

文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就可以利用HTML5或者CSS3结合的方式来渲染文字的动画特效。本文就总结了7款超华丽的HTML5 Canvas文字动画特效,可以让你的页面更加的活灵活现,充满梦幻的色彩。

 

1、HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效,比如这款HTML5 Canvas炫酷的火焰风画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效,文字同时是利用火焰来渲染的,并且燃烧的文字火焰还可以随时改变颜色,让文字更显幻彩。

 

html5-canvas-colorful-text

 

在线演示   /   源码下载

 

2、超华丽CSS3 3D五彩发光文字动画

不久前我们已经为大家介绍过一些炫酷的CSS3文字动画和HTML5文字特效,有些都非常不错,比如最近刚分享的CSS3文字跳动旋转动画以及HTML5 Canvas幻彩火焰文字特效。这次我们要来看一款纯CSS3实现的3D五彩发光文字动画,文字呈现3D立体的视觉效果,同时定时会变换字体颜色,并且文字周围微微带有发光的效果,这样就更加体现出3D的动画效果了。

 

css3-3d-shine-text

 

 

在线演示   /   源码下载

 

3、HTML5像素文字爆炸重组动画特效

HTML5可以把文字效果做得非常酷,就像之前分享的HTML5/CSS3发光文字HTML5/CSS3文字投影特效就非常绚丽。今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。

 

html5-text-pixel-effect

 

在线演示   /   源码下载

 

4、HTML5粒子效果的文字动画特效

记得之前向大家分享过一款HTML5 Canvas实现会跳舞的时间动画,利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效,并且它可以实现每个文字的逐帧播放,形成一句很浪漫的诗句。

 

html5-pixel-text-effect

 

在线演示   /   源码下载

 

5、HTML5 Canvas文字粒子动画 可自定义文字内容

之前我们分享过一些关于HTML5的粒子动画,有文字粒子动画,比如这款HTML5 Canvas粒子效果文字动画特效就非常不错。今天要分享的也是一款基于HTML5 Canvas的文字粒子动画特效,我们可以自定义文字的内容、粒子的半径、粒子重力方向、粒子抖动频率等,看起来非常强大和炫酷。

 

html5-canvas-particle-text

 

在线演示   /   源码下载

 

6、HTML5 Canvas粒子效果文字动画特效

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果。

 

html5-canvas-side-text

 

在线演示   /   源码下载

 

7、HTML5 Canvas 3D球形文字标签云动画

个人博客程序中经常会使用的一个功能叫标签云,就是把许多标签文字提取出来,使用云的形式将这些标签展示给读者。今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画,你可以定义任意的文字,然后调用HTML5代码初始化一个3D的球形标签云,效果非常不错。

 

html5-canvas-3d-text-ball

 

在线演示   /   源码下载

 

以上就是7款超华丽的HTML5 Canvas文字动画特效,欢迎收藏分享。转载请注明原文:http://www.html5tricks.com/7-wonderful-html5-canvas-text.html

1
0
评论 共 1 条 请登录后发表评论
1 楼 C_yi 2017-11-09 12:47
有个毛用!其它任何配套的面板,部件,窗体,动画和主题都没有,仅靠几个破文字做出的网站太LOW!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 绝妙的视觉错觉图片PPT

    好的PPT少不了漂亮的背景图片,看看这上面是怎样做的,可以快速提高你的艺术美感

  • Bugku 眼见非实

    看到题目之后并下载 得到眼见非实.docx 看到这个PK怀疑这是一个压缩包 ,所以将文件后缀改为.zip,并将其解压 打开word文件夹,并打开文件夹里的document.xml,flag就在里面

  • bugku-眼见非实

    题目 文件下载下来后显示的是一个无后缀的文件,看题目zip的意思以及以往的经验,把后缀改为zip再解压 目前可以看到文件里是一个docx文件,解压看 然而事情总不会想你想的那般简单,打开后发现是一堆乱码 但是循着题目的套路来看,还是和zip跑不了关系 果然,拉倒winhex里一看,一看到第一行就知道这是一个504b的标准的zip文件 我们把这个解压出来的docx后缀再改为zip进行解压 我们已经能看到得到了很多的文件夹和xml文件 像这种时候就是考验耐心的时候了 没法子,一个一个打开看吧 最后

  • Android应用 接入腾讯广告 用户行为测试,高级软件测试工程师面试题

    refresh_token是用于刷新access_token的凭证,用于向系统获取新的access_token(具体操作方法见后文),默认有效期30自然日,每次刷新access_token的操作可自动刷新refresh_token有效期的起始计算时间。Token是在Marketing API操作指定账号的身份凭证,当您需要操作特定广告账号时,您需要使用该广告账号对您的开发者应用进行授权,以获取access_token和refresh_token。您可以通过开发者应用管理页面,修改该token的有效时长。

  • Android 优质精准的用户行为统计完美解决方案

    AOP简介: 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术。AOP是OOP的延续,是软件开发中的一个热点,也是Spring框架中的一个重要内容,是函数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提...

  • Bugku-杂项-眼见非实

    如果打开一个文档文件(如.docx、.xlsx、.pptx等)时出现了以"PK"开头的内容,那么很可能是因为该文件实际上是一个压缩包(ZIP格式),而不是一个常规的文档文件。这是因为Microsoft Office文件使用了Open XML格式存储,这种格式本质上是一个XML文件和一些资源文件的打包。 该压缩包中包含了文档的各个组成部分,例如文本、图片、图表、样式等。如果你将该文件改名为.zip后缀然后解压缩,你将能够看到这些文件和文件夹。 这种设计使得Office文件更加灵活和可扩展,允许用户以压缩包的方

  • [BUGKU] [MISC] 眼见非实

    先把文件下载下来 先Binwalk跑一下 binwalk zip 发现是zip,直接改名为1.zip,打开 发现一个叫眼见非实的word文档 继续Binwalk跑一下 binwalk 眼见非实.docx 发现还是zip,改后缀为zip,打开 里面有一个眼见非实的文件夹,里面有一些xml 网上的writeup都是直接去xml里找的,我换种方法 如果你熟悉的话这些xml很容易看出是word文档的xml 新建一个压缩文件,把文件夹里的东西全部扔进去,然后改后缀为docx 打开 Flag在这里呦! 去wor

  • Bugku-眼见非实

    Windows Media (asf),文件头:3026B2758E66CF11。Windows Password (pwl),文件头:E3828596。WordPerfect (wpd),文件头:FF575043。ZIP Archive (zip),文件头:504B0304。RAR Archive (rar),文件头:52617221。Real Media (rm),文件头:2E524D46。HTML (html),文件头:68746D6C3E。Quicken (qdf),文件头:AC9EBD8F。

  • 眼见非实-MISC-bugku-解题步骤

    ——CTF解题专栏——分享我的解题过程

  • Bugku—杂项—眼见非实(ISCCCTF)(WP)

    0x00 前言 这是Bugku—杂项中一道叫做眼见非实的题目。主要是对.xml的考察。 0x01 解题过程 下载好该zip文件后会发现该压缩文件没有后缀,于是加上后缀再解压。 2. 打开解压文件后,是一个docx文档,但是打开后里面是一些乱码。 3. 但是我们看到又是PK所以怀疑他是一个压缩包,所以将文件名换成压缩包zip。 4. 打开文件呀,里面有一个Word文档打开后,发现有一个...

  • andorid用户行为统计:AOP在android中的应用

    1.用户行为统计怎么做 用户行为习惯、时间 已下代码封装?高度耦合,代码冗余,不利扩展维护 违背单一职责原则 ,统计与登录功能无关 ??设计模式 策略模式?? public void myLogin(View view) { long beginTime = System.currentTimeMillis(); SystemClock.sleep(500); ...

  • Android安全与隐私相关特性的行为变更分析

    作为 Android 安全测试人员,了解 Android 的隐私和安全特性是必不可少的,它能帮助我们更好地认识到 Android 漏洞挖掘过程中有哪些数据、系统机制是 Google 所希望保护的。

  • 眼见非实——BugKu

    一、分析 1. 下载的压缩包可以正常解压 2. 打开解压后的 .docx 文件,发现无法正常打开 3.1 用 010Editor 查看头文件发现其实是 ZIP 文件。 3.2 或者,在 Kali 中使用 file 命令 4. 修改后缀为 .zip,解压 5. 一个一个打开,ctrl+F , 搜索 flag,最后在word --> document.xml 中找到flag 6. flag{F1@g} 二、感想 常见的文件头、文件尾,我写在另一篇文章了: 常见的文件头、文件尾 有时候文件头会缺失

  • bugku 杂项 眼见非实

    这是一道文件格式分析题,我所用的主要工具是HXD。 这道题下载下来是一个压缩包,我们先把它解压一下,发现并不能打开。我们把它拖入HXD中解析一下,它的文件头是50 4B 03 04,文件尾是50 4B,这个文件实际上是一个压缩文件,我们把这个文件类型改成压缩文件。再次解压这个文件,如图这样的话,这些文件就都可以打开了,这是我们就猜想flag可能就在这些文件里面,我们可以把这些文件打开,找我们想要的...

  • BugkuCTF-Misc:眼见非实(ISCCCTF)

    step1、下载后保存到本地 发现此文件无后缀名——》kaliLinux下可以用:“file 文件名” 查看文件类型 去查看这个文件头,zip检测到504B0304.是根据文件头的字段来识别这个文件是什么类型的 Windows下可以用十六进制编辑器(010editor/notepad++/winhex查看) step2、修改zip的后缀名为zip.zip,解压缩出一个.docx文件 发现文件头为 50 4B 03 04 说明是一个压缩文件,还可以看到其中有.docx 文件 step3、将“眼见非.

  • Bugku Misc 眼见非实(ISCCCTF)

    附件下载zip文件,文件没有后缀 尝试双击打开,kali以压缩包的形式打开,可能文件头包含zip等文件相关信息 解压得到一个docx文件,但是无法使用libreoffice打开 使用binwalk查看了文件末尾之后发现并不是一个单纯的word文件 于是,直接更改文件后缀为zip,直接打开,得到 解压出来,通过tree以树状图的形式查看文件夹 很多文件,命令行搜索各个文件: ...

  • 自定义收集用户行为统计库 (非常方便 可以自己拓展)

    自定义收集用户行为统计库 (非常方便 可以自己拓展) 详细信息 http://blog.csdn.net/liudao7994/article/details/75434875

  • 视觉错觉图片

    点击打开链接

  • Android监测用户行为,未操作定时执行事件

    前言 这是小弟第一次写博客,旨在记录自己的IT学习之路,总结编程开发知识,与更多朋友分享交流学习。若有不足,请多指教。 在我们实际Android开发中,有时候会有“用户一段时间不操作程序,执行某些事件”的需求,正好现在公司项目实现了这个需求,特地写了这篇博客记录。 运行效果 声明一下,重新开始计时不是通过右下角的按钮控制的,是通过Activity的onUserInteraction

  • 恐怖的幻觉图片,你敢试试吗 ?

    如果从你座位前的电脑上看上面的图片左边的图形是生气的脸而右边的图形是平静的脸如果是这样,就好,请你先回帖然后请你起立往后走3~5步突然间他们交换位置了!!这个幻觉图片由Glasgow大学的PhillippeG.SchynsandAudeOliva所设计觉得有趣的话就顶一个吧! ...

Global site tag (gtag.js) - Google Analytics