阅读更多

1顶
0踩

Web前端

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

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

文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就可以利用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!

发表评论

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

相关推荐

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

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

  • 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

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

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

  • BugKu练习记录7:眼见非实

    文件较多,用Linux命令查找,通过xftp上传到虚拟机中,命名为test,通过grep查找包含flag的信息。题目下载后是一个docx文件,直接打开提示错误,用010 editor打开查看前缀为50 4B 03 04。修改后缀为zip,打开发现有以下文件。

  • 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。

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

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

  • 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以树状图的形式查看文件夹 很多文件,命令行搜索各个文件: ...

  • Bugku 眼见非实

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

  • 眼见非实——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} 二、感想 常见的文件头、文件尾,我写在另一篇文章了: 常见的文件头、文件尾 有时候文件头会缺失

  • 绝妙的视觉错觉图片PPT

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

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

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

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

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

  • 模型幻觉

    在搭建模型的过程中,我们往往会从已知的特征中提取更多新的特征,并以此搭建更为复杂的模型,但是模型越复杂,越会值其本身掉入不断“自我催眠,强化偏见”的过程,从而引起过度拟合的问题。如果将毫不相关的变量加入到模型中,也会得到相应的参数估计值,而这个估计值几乎不可能为0,这就造成了所谓的“模型幻觉”。模型幻觉会引起模型参数的不可靠,更严重的是使得原本可能较为正确的估计扭曲为错误,比如将原来变量的正效应估...

  • 图形显示例子_不存在的图形,你看得出来吗?

    文:喵萌 编辑:喵萌 & 小黑哥哥你知道视错觉吗?在网页的搜索栏搜索「错觉」,你可以看到许多种类不同的有趣错觉图片。举个例子!下面这张图片是由两种方向的黑色、灰色斜线构成的,它的奇特之处在于,如果你把手机拿得远远地看,可以看到一只熊猫,但如果靠得很近去看,熊猫就消失不见了。远远地能看到萌萌哒胖达!近视患者摘了眼镜效果拔群!不要长时间盯着看,太晃眼……上面的例子只是众多视错觉中的一种。...

  • 十大欺骗眼睛的图片

    我先在上面说一下   因为这里面的图比较小 效果可能不好   如果看不出来的朋友可以点击图片看大图去找 特别是第8和第10要用大图1.柱子是圆的还是方的?       =200) window.open(http://photo.sohu.com/20041112/Img222951195.jpg);" src="http://photo.sohu.com/20041112/Img222951

  • Android 用户行为收集之 GoogleAnalytics

    这段时间因公司项目需要加入用户行为收集这一块,首先第一个想到是友盟(umeng),因为umeng在我国应用很广泛,再加上它确实简单免费,开发文档超详细,所以高高兴兴就准备开始了。可是,可是…..哥们儿的公司做的是国外的产品,这下不好办了,因为umeng服务器在国内啊,这样传数据不仅会丢包,而且安全性也不高,最后索性直接问问umeng吧,就和umeng进行了交流,的确人家国外暂时没服务器,说是有一个内

  • 不可思议的错觉图片

    a、b两点颜色是一样的吗?    A方块和B方块的颜色是一样的。环境影响了你的感知,让你产生了错觉。不信的话,你可以用photoshop提取颜色。    此图属于“侧抑制”的应用。   google_ad_client = "pub

Global site tag (gtag.js) - Google Analytics