今天给大家分享一个效果很棒的HTML5 Canvas动画，它是一个火焰动画，这与我们之前分享的HTML Canvas火焰画笔动画类似，也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动，如果你有一个游戏方面的宣传网页，那么这个动画可以用在鼠标移动上，应该是比较酷的。
HTML5 Canvas火焰跟随鼠标动画
5,887 人浏览
2019-01-08 21:28:17
分类目录归档：HTML5教程
纯CSS3动画按钮效果 5种漂亮样式
49,614 人浏览
2014-11-20 10:44:18
这次我们要来分享一款很不错的CSS3按钮动画，这款CSS3按钮一共有5种动画方式，每一种都是鼠标滑过动画形式，虽然这些动画按钮不是十分华丽，但是小编觉得不像其他按钮那样很难扩展，我们可以修改CSS代码随意改变自己喜欢的颜色样式。
让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。
HTML代码：
<div class="button01">
<a href="#">Download</a>
<p class="top">click to begin</p>
<p class="bottom">1.2MB .zip</p>
</div>
CSS代码：
.button01 {
width: 200px;
margin: 50px auto 20px auto;
}
.button01 a {
display: bloc[......]
PHP中的HTML5应用 将Canvas图像保存到服务器
14,678 人浏览
2014-06-28 23:04:44
在几年前HTML5还没有流行的时候，我们的项目经理曾经向我提出这样一个需求：让项目评审专家们在评审结束时用笔在平板电脑上进行电子签名。这需要我们评审软件里提供这样一个功能：打开浏览器，登录，进入评审意见页，页面最下部有个方块区域，用户在这里用触摸笔进行签名，然后这个签名将会保持的服务器上。
这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，真是太简单了。在《将画布(canvas)图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能——很简单，虽然有一个小bug——但完全能当作签名用。
我之前说了很多如何将canvas图像保存成图片并下载的方法，但这些方法都是将图片保存到客户端，而我们的签名需求是需要将canvas的内容保存到服务器端，如何实现？
其实很简单，看完下面的这段PHP代码，相信你也会觉得很简单。
<?php
// requires php5
define('UPLOAD_DIR', 'images/');
$img = $_POST['img'];
$img = str_re[......]
基于HTML5的云虚拟主机配置界面
12,013 人浏览
2014-06-21 11:12:45
云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路
云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路
参考示例 – visualops
云平台可视化这块儿国外做的不错，有不少开放的示例可以学习和参考，客户看中了这家云管理系统http://www.visualops.io/ ，这个系统使用的是SVG技术，体验了一下，效果不错，参照着实现
从界面上看，一个云节点上有多个子网，每个子网内有多台虚拟主机，然后每个云节点有统一的[......]
HTML5简介及HTML5的发展前景
23,941 人浏览
2014-06-19 18:38:48
WEB技术发展越来越迅速，HTML5的到来更是把WEB技术推向了巅峰，目前HTML5技术已经日趋成熟，不仅在PC段，HTML5更是在移动终端上也有广泛的应用，HTML5的未来十分光明，值得我们去学习。
什么是HTML5
HTML5是最新一代的HTML标准，它不仅拥有HTML中所有的特性，而且增加了许多实用的特性，如视频、音频、画布（canvas）等。2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
HTML5可以做什么
HTML5作为HTML标准，你当然可以用它来实现之前HTML可以实现的功能，除此之外，我们还可以用HTML5做以下特别的事情：
1、本地存储
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
2、实现多媒体更加简单
我们可以利用HTML5的<video>和&[......]
HTML5 placeholder美化input背景提示文字
15,158 人浏览
2014-06-16 16:19:15
之前在介绍HTML5 input新增的几种类型（数字、日期、颜色选取、范围）时，曾实现了一些页面例子让大家参考，但这些例子里的背景文字都是灰色的，样式很单一，其实它们可以做的更好看，CSS3里提供了专门的规则属性来美化用placeholder实现的input输入框的背景提示信息。下面我们来看看如何用专用的CSS属性来美化具有placeholder属性的Input输入框。
CSS代码
在火狐浏览器中的写法和在谷歌浏览器和Safari里的写法有些不同，但相信以后会统一。
/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }
/* webkit专用 */
#field2::-webkit-input-placeholder { color:#0[......]
HTML5 input新增的几种类型（数字、日期、颜色选取、范围）
43,679 人浏览
2014-06-14 19:15:49
你可能已经听说过，HTML5里引入了几种新的input类型。在HTML5之前，大家熟知的input类型包括：text(输入框)，hidden(隐藏域)，submit(提交按钮)等。而HTML5到来之后，新增的input类型包括：number(数字)，date(日期)，color(颜色)，range(范围)等等。网上之所以还没有大量的出现对这些新型的input类型的使用，是因为还有很多人在使用古老的IE6/IE8，只有当使用这些古老浏览器的人所占的比例可以忽略不计时，那就是HTML5主导天下之日，那天也是我们Web开发人员的新纪元的开始。
下面是这几种新型input类型的实例演示，可能在不同的浏览器上它们的样式会稍微有些变化，但基本的功能都是一样的。
html5中的新型input类型
数字型 type=”number”
<input type="number">
效果：
日期型 type=”date”
<input type="date">
效果：
颜色选择器 type=”color”
<input type="color">
[......]
HTML5 DNA螺旋旋转动画效果
12,773 人浏览
2014-06-12 21:35:43
这是一款基于HTML5的螺旋动画特效，它就像DNA分子结构一样，可以绕着中心线不停地旋转。对于HTML5旋转动画，之前我们也介绍过一款，比如这款HTML5 3D图片切片滑块旋转动画，就非常不错，大家也可以看看。
HTML5 Placeholder实现input背景文字提示效果
51,659 人浏览
这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示：
这种效果现在网上非常的普遍流行，但大部分是使用JavaScript实现的。但HTML5给我们提供了新的纯HTML的实现方式，不需要任何的JavaScript，只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。
语法基本是这个样子：<input placeholder=”提示信息...”>
HTML代码
<form> <input type="text" placeholder="你的姓名..." name="lname"> <input type="password" placeholder="你的密码..." name="pass"> <input type="submit" value="提交"> </form>
用CSS美化Placeholder提示信息的样式
CSS3里有相应的通用的对Placeholder提示信息美化的方法。[......]
用HTML5打造本地桌面应用
21,555 人浏览
2014-05-21 07:36:06
HTML5让Web开发人员用纯HTML技术开发富客户端互联网应用或者甚至本地桌面应用成为了可能。HTML5可以将任何普通网站转变成Web应用。HTML5 web 应用不仅具有在桌面浏览器应用中的优势，同时在智能手机和平板中也是开发利器。
在手机端，有一个非常棒的工具叫做PhoneGap，使用这个快速开发平台，任何人都可以使用HTML5+CSS3+JavaScript开发出安卓，iOS等应用。PhoneGap的最好的一个特点是，你并不需要联网，不需要连接web服务器，你可以从把它当成本地桌面应用。一旦下载到本地，它和本地原生应用一样可以离线使用。
通常我们会感觉网上有很多有趣的HTML应用，但这些应用非要你打开浏览器，输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用HTML5+js开发的本地桌面应用就是要提高给用户这种体验，除了上面说的PhoneGap，还有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是开发HTML5本地桌面应用的框架。
Pokki和Chrome不仅可以用来开发HTML[......]