效果展示：http://hovertree.com/texiao/html5/26/

效果图：

扫描二维码查看效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAEG0lEQVR4nO2dwXLDMAhE407//5fTm9sZEbwsqOu0+06d2Jbc7IABIed4Pp8Po+NDfQP/HQsg5vP86ziO/nCnQ6uOlnvCcDRwrupp4bz0/3U5ly1AjAUQ87l+VI2LcKtMRiZMm3ApyGkj/05IOLItQIwFEBO4oJNNNh6ODJ5G3MkayeQjE5lp54uyBYixAGIsgJjsGdChmjoSYWg1eQ6nGHnOdbAFiLEAYna5oJBO2okMQniM1VWG0eo+X2QLEGMBxGQuqGN3nfwTrMLn/iH3Lcj5OJ0vyhYgxgKICVzQyKpbzuwK38nP0aoVuqrPvDwKYgsQYwHEWAAxx6YcD2wk6ax+dNw3mE47E/77WAAxmQsiOs5oJ4MPQgd/I4k9ODJ+vi1AjAUQEzTngrWt9VAImJ3mTiYfpJORVjtf8GQbPM0WIMYCiLEAYoIwNH8YdAIyMEilGxd/oYtkfDOILUCMBRCTbdDIC2oh4ApGZ3vXb+6rpfN53HvbAsRYADFHtXxGu5HwTLCidzkyMsjIBg1wCkdBb4MFEIM259ILgeMBDD3IeErY8TwntgAxFkCMBRDz/QygE2AiYc6vzQepZqegg57dyxY+KsI7twWIsQBi0GJcYvi4o1g/7JT2VvbtESOuBbEFiLEAYgbaUvAXuo3YbD5vcieda6vOED/fFiDGAoixAGKCBZmQTW/yI1Z9qwtH+bw5YK2082yzBYixAGL4PWLjPWLryJ3V6WptkTiNDlJdjLsRFkBM9qqCzjJpeLQ6VzLs5SVVRhLmkHwQW4AYCyCG74ybZTYcury22hk3W7xzFHQjLIAYCyCmXIyb3UF2cXPFWhjB7HtbCGwBYiyAGHSbKp0TdnY0VFNx/I0GI3W0Ku6MuyMWQEzWlgLaLNEZtzLS1BYCxipEoDVSO7AFiLEAYiyAGDQTBhlp9wBPm12UBh9a1f6UfNKHLUCOBRCD/oIGvYIBbqzFs27wTmZ7W8LZ120mxNKQLUCMBRCDrgnTRSt8+8Z6tMpIuS1k3142W4AYCyCG/0Xtk3xX+KszX31yeSfVPhoivAFvrxrUOQq6IxZAjAUQMxyGbtp7RTBSqqtChNe2ADEWQMz23xEDy+vE+w6SYfEpQEa2mYTYAsRYADFBW0qHpERODEIklvQgoM8EnSG+rmkLEGMBxFgAMdlL+0DwFozEfROd2NUdy6/OvBwWvPDV0fwSW4AYCyCGX5AZeblAJ4dcI8h83aazVaQaTLsz7m2wAGLQX9CgASMTotw2u9Esv+GRTSshtgAxFkDMdhdExB4j9f08vqLjMaKil09hCxBjAcRYADHlN2YFQ6QRJHNPxTuZ7SrEob8oPwNuhAUQk703dASiotfxPMnRfXtdOw7NFiDGAojZ1RlnQGwBYiyAGAsg5gtXtrIfJZ2UkwAAAABJRU5ErkJggg==" alt="火焰二维码" width="128" height="128" />

或者关注微信公众号 ihewenqi ,发送 我 或者 张国荣 ，可以查看效果。

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML5火焰文字特效DEMO演示 - 何问起</title>

<style>

html, body {

margin: 0px;

width: 100%;

height: 100%;

overflow: hidden;

background-color: #000000;

font-family: sans-serif;

}

#canvasContainer {

margin: 0px;

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div>

</div>

<div id="canvasContainer"></div>

<!--修改这里的文字-->

<span id="hovrtreefire">何问起</span>

<a href="http://hovertree.com/">首页</a>

<a href="http://hovertree.com/texiao/">特效</a>

<a href="http://hovertree.com/h/bjaf/xmrvjvng.htm">原文</a>

<script src="http://hovertree.com/texiao/html5/26/hovertreefire.js"></script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/xmrvjvng.htm

OnBlur事件表示什么？

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

HTML5火焰文字特效DEMO演示的更多相关文章

  1. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  2. CSS3火焰文字特效制作教程

    原文:CSS3火焰文字特效制作教程 用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家.今天刚完成了一个 ...

  3. HTML5 3D 粒子波浪动画特效DEMO演示

    需要thress.js插件:     http://github.com/mrdoob/three.js // three.js - http://github.com/mrdoob/three.js ...

  4. 7款震撼人心的HTML5文字特效

    1.CSS3五彩文字特效 文字带阴影效果 这是一款非常具有卡通形象的CSS3五彩文字特效,虽然没有迷人的动画效果,但是五彩缤纷的文字展现在屏幕上也是非常酷的,再加上每一个文字都有不同角度的阴影效果,加 ...

  5. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  6. 7款让人惊叹的HTML5粒子动画特效

    HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...

  7. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

随机推荐

  1. MVC学习一：EF

    目录 一.EF修改和删除的多种方法 二.标准查询where 三.include 四.skip take 五.反射获取实例属性 六.EF DLL数据访问帮助类 一.EF修改和删除的多种方法 方法1:官方 ...

  2. ABP理论学习之发布说明

    返回总目录 查看更详细信息以及下载源代码请查看原文档 ABP v0.9.2.0 | [更新日期:2016/6/6 11:21:28 ] 解决方案转换成xproj/project.json格式. 添加了 ...

  3. 剑指Offer面试题：14.链表的倒数第k个节点

    PS:这是一道出境率极高的题目,记得去年参加校园招聘时我看到了3次,但是每次写的都不完善. 一.题目:链表的倒数第k个节点 题目:输入一个链表,输出该链表中倒数第k个结点.为了符合大多数人的习惯,本题 ...

  4. .NET单元测试的艺术-3.测试代码

    开篇:上一篇我们学习单元测试和核心技术:存根.模拟对象和隔离框架,它们是我们进行高质量单元测试的技术基础.本篇会集中在管理和组织单元测试的技术,以及如何确保在真实项目中进行高质量的单元测试. 系列目录 ...

  5. Elasticsearch 5.0 —— Head插件部署指南

    使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! 官方粗略教程 Running with built in server ...

  6. oracle 备份数据库对象(存储过程PROCEDURE,FUNCTION,VIEW,TRIGGER...)

    开发过程中,需要不停的备份数据库对象, 特别是存储过程, 每次手动备份不免很低能啊 历经几次修改终于, 完美了,O(∩_∩)O哈哈~      (当然,你也可以再改简便一点~~~) select db ...

  7. 使用Event Message 对 Package 进行Troubleshoot

    在SSIS Server上,发现一个Package Job运行异常,该Package处于僵死状态.从 Job Activity Monitor中看到该Job一直处于运行状态,但是,DW中没有执行任何Q ...

  8. 群福利：百度云管家-本地SVIP

    效果 如果不想登录破解版的百度云(防止泄密)==>复制AppSettingApp.dat和users文件夹,这样你就可以免登录了 最稳定版本:https://yunpan.cn/cBTQc9Iu ...

  9. MVC4做网站六后台管理:6.1.4管理员列表、添加及删除

    一.管理员列表 1.首先[AdministratorController]中添加返回分部视图的public PartialViewResult Index() /// <summary> ...

  10. Android全屏（包含3种隐藏顶部状态栏及标题栏和一种隐藏Android 4.0平板底部状态栏的方法）

    http://www.xuebuyuan.com/558284.html 方法一 public class MainActivity extends Activity { @Override prot ...