效果网址：http://keleyi.com/keleyi/phtml/html5/5.htm

代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>2015元旦来个炫的html5特效-柯乐义</title><base target="_blank" />

 <script type="text/javascript"> window.onload = function () {

 C = Math.cos; S = Math.sin; U = 0; w = window; j = document; d = j.getElementById("kele"+"yi_com"); c = d.getContext("2d"); W = d.width = w.innerWidth; H = d.height = w.innerHeight; c.fillRect(0, 0, W, H); c.globalCompositeOperation = "lighter"; c.lineWidth = 0.2; c.lineCap = "round"; var bool = 0, t = 0; d.onmousemove = function (e) {

 if (window.T) {

 if (D == 9) { D = Math.random() * 15; f(1); }

 clearTimeout(T);

 }

 X = e.pageX; Y = e.pageY; a = 0; b = 0; A = X, B = Y; R = (e.pageX / W * 999 >> 0) / 999; r = (e.pageY / H * 999 >> 0) / 999; U = e.pageX / H * 360 >> 0; D = 9; g = 360 * Math.PI / 180; T = setInterval(f = function (e) {

 c.save(); c.globalCompositeOperation = "source-over"; if (e != 1) { c.fillStyle = "rgba(0,0,0,0.02)"; c.fillRect(0, 0, W, H); }

 c.restore(); i = 25; while (i--) {

 c.beginPath(); if (D > 450 || bool) {

 if (!bool) { bool = 1; }

 if (D < 0.1) { bool = 0; }

 t -= g; D -= 0.1;

 }

 if (!bool) { t += g; D += 0.1; }

 q = (R / r - 1) * t; x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25)); if (a) { c.moveTo(a, b); c.lineTo(x, y) }

 c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; c.stroke(); a = x; b = y;

 }

 U -= 0.5; A = X; B = Y;

 }, 16);

 }

 j.onkeydown = function (e) { a = b = 0; R += 0.05 }

 d.onmousemove({ pageX: 300, pageY: 290 })

 }</script>

 <style>body{margin:0;overflow:hidden}div{padding:1px 5px;background:#333;position:absolute;z-index:2;color:#555;font-family:arial}a{color:#ccf}a:hover{color:red}</style>

 </head>

 <body>

 <div><a href="http://keleyi.com/">首页</a> <a href="http://keleyi.com/a/bjad/8e9jd0u5.htm">原文</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> 1kb的Javascript能干什么？</div>

 <div id="text"></div>

 <canvas id="keleyi_com"></canvas>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

2015元旦来个炫的html5特效的更多相关文章

  1. 9款很酷炫jQuery/HTML5特效应用 有源码哦~

            目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...

  2. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  3. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  4. 程序猿必备的10款超炫酷HTML5 Canvas插件

    1.超炫酷HTML5 Canvas 3D旋转地球动画 这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

  5. HTML5特效收录-不定时更新

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.希望能给大大家启发,并且学习. HTML5 Canvas粒 ...

  6. 优秀教程：使用 CSS3 动画实现的超炫的过渡特效

    Codrops 最近分享了一些很酷的图片切换灵感.有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片.状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为. ...

  7. 8款功能强大的最新HTML5特效实例

    1.HTML5 Canvas画板画图工具 可定义笔刷和画布 今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能,我们可以自定义笔刷的类型.粗细.颜色,也可以定义画布的大小和背 ...

  8. CSS3+HTML5特效8 - 顶部和右侧固定，左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  9. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

随机推荐

  1. VS web项目 基于IIS调试和模拟域名调试

    1.安装IIS 2.注册.net framework 到IIS 打开程序-运行-cmd:输入一下命令重新注册IISC:\WINDOWS\Microsoft.NET\Framework\v4.0.303 ...

  2. JDK安装源码src和doc

    (1)src 打开JDK的安装目录如(C:\Program Files\Java\jdk1.8.0_91)有一个src.zip的压缩文件,这个压缩文件里就是源码. mkdir src copy src ...

  3. LINQ系列：Linq to Object元素操作符

    元素操作符从一个序列返回单个指定的元素. 1. DefaultIfEmpty DefaultIfEmpty操作符将一个空集合替换为包含默认的单个值的集合.在返回序列为空且又需要返回一些对象时,可以通过 ...

  4. Delaunay Triangulation in OpenCascade

    Delaunay Triangulation in OpenCascade eryar@163.com 摘要:本文简要介绍了Delaunay三角剖分的基础理论,并使用OpenCascade的三角剖分算 ...

  5. Android之JSON解析

    做个Android网络编程的同学一定对于JSON解析一点都不陌生,因为现在我们通过手机向服务器请求资源,服务器给我们返回的数据资源一般都是以JSON格式返回,当然还有一些通过XML格式返回,相对JSO ...

  6. 【原创】开源Math.NET基础数学类库使用(08)C#进行数值积分

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  7. 详解 ML2 Core Plugin（II） - 每天5分钟玩转 OpenStack（72）

    上一节我们讨论了 ML2 Plugin 解决的问题,本节将继续研究 ML2 的架构. ML2 对二层网络进行抽象和建模,引入了 type driver 和 mechansim driver. 这两类 ...

  8. 辨析relative与absolute

    谈起它们,想必大家都不陌生.relative,相对定位嘛:absolute,绝对定位嘛.但是它们到底是个啥东东呢? 看看w3c的定义,见下表 定位 含义 relative 元素框偏移某个距离.元素仍保 ...

  9. IE内核发送ajax请求时不会将url中的参数编码

    有一次用户遇到创建文件,名称为中文时乱码的问题. 经调查,发现用户使用的是国产浏览器ie模式 抓取请求发现 IE: 键 值请求 POST /Handlers/CreateTxtFile.ashx?fi ...

  10. 关于Simple_html_dom的小应用

    今天一同学给我推荐了本书,说是刚出不久,内容还不错,是心灵鸡汤类的书,于是按捺不住就像在网上下一本,可是木有资源肿么办.只有在线看的,作为一个准码农,所以甭废话了,咱得用代码解决问题对吧…… 1.工欲 ...