分类目录归档：HTML5教程

3,744 人浏览

2019-01-08 21:28:17

今天给大家分享一个效果很棒的HTML Canvas火焰画笔动画类似，也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动，如果你有一个游戏方面的宣传网页，那么这个动画可以用在鼠标移动上，应该是比较酷的。

45,362 人浏览

2014-11-20 10:44:18

这次我们要来分享一款很不错的

让我们一起来看看实现这5中样式动画按钮的HTML代码和CSS代码吧。以第一个按钮为例，其他按钮的代码大家可以下载源代码来研究，并不是很难。

HTML代码：

CSS代码：

.button01 {

width: 200px;

margin: 50px auto 20px auto;

}

.button01 a {

display: bloc[......]

在几年前

这样的一个需求在当时是让我大费周折，但如今想起来，如果用html5的canvas实现，真是太简单了。在《将画布(canvas)图像保存成本地图片的方法》这篇文章里就有一个只用了几行代码就实现了的画板功能——很简单，虽然有一个小bug——但完全能当作签名用。

我之前说了很多如何将canvas图像保存成图片并下载的方法，但这些方法都是将图片保存到客户端，而我们的签名需求是需要将canvas的内容保存到服务器端，如何实现？

其实很简单，看完下面的这段PHP代码，相信你也会觉得很简单。

// requires php5

define('UPLOAD_DIR', 'images/');

$img = $_POST['img'];

$img = str_re[......]

10,191 人浏览

2014-06-21 11:12:45

云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路

云计算大行其道，上期开源中国的原创会就有好几位云计算专家演讲，从底层的虚拟化技术，到上层的云存储和应用API，耳濡目染，也受益匪浅，算是大势所趋，回头看看Qunee组件，借这个趋势，可以在云计算可视化上发挥作用，最近就有客户用Qunee实现VPC配置图，并对交互做了定制，细节不便多说，本文主要介绍Qunee交互扩展方面的思路

参考示例 – visualops

云平台可视化这块儿国外做的不错，有不少开放的示例可以学习和参考，客户看中了这家云管理系统http://www.visualops.io/ ，这个系统使用的是SVG技术，体验了一下，效果不错，参照着实现

从界面上看，一个云节点上有多个子网，每个子网内有多台虚拟主机，然后每个云节点有统一的[......]

21,426 人浏览

2014-06-19 18:38:48

WEB技术发展越来越迅速，

什么是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的和&[......]

之前在介绍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[......]

你可能已经听说过，

下面是这几种新型input类型的实例演示，可能在不同的浏览器上它们的样式会稍微有些变化，但基本的功能都是一样的。

html5中的新型input类型

数字型 type=”number”

效果：

日期型 type=”date”

效果：

颜色选择器 type=”color”

[......]

11,234 人浏览

2014-06-12 21:35:43

这是一款基于HTML5 3D图片切片滑块旋转动画，就非常不错，大家也可以看看。

这篇文章我们来看看什么是input输入框背景文字提示效果，如下图所示：

这种效果现在网上非常的普遍流行，但大部分是使用JavaScript实现的。但input文本框的标记上添加HTML5规范里新增的placeholder属性，然后在属性值里输入你需要的提示信息。

语法基本是这个样子：

HTML代码

用CSS美化Placeholder提示信息的样式

CSS3里有相应的通用的对Placeholder提示信息美化的方法。[......]

18,063 人浏览

2014-05-21 07:36:06

在手机端，有一个非常棒的工具叫做PhoneGap，使用这个快速开发平台，任何人都可以使用HTML5+CSS3+JavaScript开发出安卓，iOS等应用。PhoneGap的最好的一个特点是，你并不需要联网，不需要连接web服务器，你可以从把它当成本地桌面应用。一旦下载到本地，它和本地原生应用一样可以离线使用。

通常我们会感觉网上有很多有趣的HTML应用，但这些应用非要你打开浏览器，输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用HTML5+js开发的本地桌面应用就是要提高给用户这种体验，除了上面说的PhoneGap，还有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是开发HTML5本地桌面应用的框架。

Pokki和Chrome不仅可以用来开发HTML[......]

文章导航

第1页 共2页12»