效果网址：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. 初学者--bootstrap（三）下载与安装----在路上（7）

    ----------------------------------------对于学习与工作者来说用压缩版,若是研究框架则用源代码---------------------------------- ...

  2. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  3. show master/slave status求根溯源

    show master/slave status分别是查看主数据库以及副数据库的状态,是一种能查看主从复制运行情况的方式. 这里仅仅讨论linux下的nysql5.7.13版本的执行情况 一.show ...

  4. DAC Usage4：从 Backup Package（.bacpac）还原DB

    使用DAC,能够将database的schema 和 data 从一个server 或 cloud 上复制到另外一个server上,存储schema 和 data的文件是 .bacpac 文件. 方法 ...

  5. Android入门(二十一)解析XML

    原文链接:http://www.orlion.ga/685/ 解析XML常用的方式有两种,一种是PULL解析一种是SAX解析. 假设解析数据为: <apps>     <app> ...

  6. jQuery中的Sizzle引擎分析

    我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...

  7. 自己使用的一个.NET轻量开发结构

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAABFCAIAAAAerjlvAAAE2UlEQVR4nO2a3U/bVhiH+bdyPaqpmx

  8. matlab基础教程——根据Andrew Ng的machine learning整理

    matlab基础教程--根据Andrew Ng的machine learning整理 基本运算 算数运算 逻辑运算 格式化输出 小数位全局修改 向量和矩阵运算 矩阵操作 申明一个矩阵或向量 快速建立一 ...

  9. 软件工程-构建之法 理解C#一小段程序

    一.前言 老师给出的要求: 阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长 ...

  10. SQL Server SQL性能优化之--pivot行列转换减少扫描计数优化查询语句

    原文出处:http://www.cnblogs.com/wy123/p/5933734.html 先看常用的一种表结构设计方式: 那么可能会遇到一种典型的查询方式,主子表关联,查询子表中的某些(或者全 ...