效果网址：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. 程序中保存状态的方式之Cookies

    程序中保存状态的方式之 Cookies,之前写过一篇关于ViewState的.现在继续总结Cookies方式的 新建的测试页面login <%@ Page Language="C#&q ...

  2. CSS3新特性,绘制常见图形

    前言:最近准备做一个自己的网页,设计稿中导航我准备设计成矩形,也有hover样式展示的矩形,当中一些头像等等.以前除了画圆,好像真没认真画过其他图形,今天就画画我们常见到的几个图形. 在此之前我们有必 ...

  3. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  4. 【WP 8.1开发】如何动态生成Gif动画

    相信如何为gif文件编码,很多朋友都会,而难点在于怎么让GIF文件中的帧动起来,也就是创建gif动画. Gif文件编码方法 先简单介绍一下编码的方法. 1.调用BitmapEncoder.Create ...

  5. 解读sencha touch移动框架的核心架构(二)

    本来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧 为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构 在Java中,我们在实现继承的时候存在下面几个事实 ...

  6. Building OpenCascade on Windows with Visual Studio

    Building OpenCascade on Windows with Visual Studio eryar@163.com 摘要Abstract:详细说明OpenCascade的编译配置过程,希 ...

  7. ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构

    咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...

  8. windows8建立局域网的方法

    win8建立局域网的方法:1.首先笔记本有无线网卡且支持 虚拟WIFI ;2.按win+X键,选择"命令提示符(管理员)A"; 3.输入"netsh wlan set h ...

  9. 【开源】OSharp框架解说系列（5.1）：EntityFramework数据层设计

    OSharp是什么? OSharp是个快速开发框架,但不是一个大而全的包罗万象的框架,严格的说,OSharp中什么都没有实现.与其他大而全的框架最大的不同点,就是OSharp只做抽象封装,不做实现.依 ...

  10. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...