分類目錄歸檔：HTML5教程

3,744 人瀏覽

2019-01-08 21:28:17

今天給大家分享一個(gè)效果很棒的HTML Canvas火焰畫筆動(dòng)畫類似，也是在Canvas上通過鼠標(biāo)繪制而成。這個(gè)火焰動(dòng)畫會(huì)不停地跟隨鼠標(biāo)移動(dòng)，如果你有一個(gè)游戲方面的宣傳網(wǎng)頁(yè)，那么這個(gè)動(dòng)畫可以用在鼠標(biāo)移動(dòng)上，應(yīng)該是比較酷的。

45,362 人瀏覽

2014-11-20 10:44:18

這次我們要來分享一款很不錯(cuò)的

讓我們一起來看看實(shí)現(xiàn)這5中樣式動(dòng)畫按鈕的HTML代碼和CSS代碼吧。以第一個(gè)按鈕為例，其他按鈕的代碼大家可以下載源代碼來研究，并不是很難。

HTML代碼：

Download

click to begin

1.2MB .zip

CSS代碼：

.button01 {

width: 200px;

margin: 50px auto 20px auto;

}

.button01 a {

display: bloc[......]

在幾年前

這樣的一個(gè)需求在當(dāng)時(shí)是讓我大費(fèi)周折，但如今想起來，如果用html5的canvas實(shí)現(xiàn)，真是太簡(jiǎn)單了。在《將畫布(canvas)圖像保存成本地圖片的方法》這篇文章里就有一個(gè)只用了幾行代碼就實(shí)現(xiàn)了的畫板功能——很簡(jiǎn)單，雖然有一個(gè)小bug——但完全能當(dāng)作簽名用。

我之前說了很多如何將canvas圖像保存成圖片并下載的方法，但這些方法都是將圖片保存到客戶端，而我們的簽名需求是需要將canvas的內(nèi)容保存到服務(wù)器端，如何實(shí)現(xiàn)？

其實(shí)很簡(jiǎn)單，看完下面的這段PHP代碼，相信你也會(huì)覺得很簡(jiǎn)單。

// requires php5

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

$img = $_POST['img'];

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

10,191 人瀏覽

2014-06-21 11:12:45

云計(jì)算大行其道，上期開源中國(guó)的原創(chuàng)會(huì)就有好幾位云計(jì)算專家演講，從底層的虛擬化技術(shù)，到上層的云存儲(chǔ)和應(yīng)用API，耳濡目染，也受益匪淺，算是大勢(shì)所趨，回頭看看Qunee組件，借這個(gè)趨勢(shì)，可以在云計(jì)算可視化上發(fā)揮作用，最近就有客戶用Qunee實(shí)現(xiàn)VPC配置圖，并對(duì)交互做了定制，細(xì)節(jié)不便多說，本文主要介紹Qunee交互擴(kuò)展方面的思路

云計(jì)算大行其道，上期開源中國(guó)的原創(chuàng)會(huì)就有好幾位云計(jì)算專家演講，從底層的虛擬化技術(shù)，到上層的云存儲(chǔ)和應(yīng)用API，耳濡目染，也受益匪淺，算是大勢(shì)所趨，回頭看看Qunee組件，借這個(gè)趨勢(shì)，可以在云計(jì)算可視化上發(fā)揮作用，最近就有客戶用Qunee實(shí)現(xiàn)VPC配置圖，并對(duì)交互做了定制，細(xì)節(jié)不便多說，本文主要介紹Qunee交互擴(kuò)展方面的思路

參考示例 – visualops

云平臺(tái)可視化這塊兒國(guó)外做的不錯(cuò)，有不少開放的示例可以學(xué)習(xí)和參考，客戶看中了這家云管理系統(tǒng)http://www.visualops.io/ ，這個(gè)系統(tǒng)使用的是SVG技術(shù)，體驗(yàn)了一下，效果不錯(cuò)，參照著實(shí)現(xiàn)

從界面上看，一個(gè)云節(jié)點(diǎn)上有多個(gè)子網(wǎng)，每個(gè)子網(wǎng)內(nèi)有多臺(tái)虛擬主機(jī)，然后每個(gè)云節(jié)點(diǎn)有統(tǒng)一的[......]

21,426 人瀏覽

2014-06-19 18:38:48

WEB技術(shù)發(fā)展越來越迅速，

什么是HTML5

HTML5是最新一代的HTML標(biāo)準(zhǔn)，它不僅擁有HTML中所有的特性，而且增加了許多實(shí)用的特性，如視頻、音頻、畫布(canvas)等。2012年12月17日，萬維網(wǎng)聯(lián)盟(W3C)正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺(tái)的奠基石。”

HTML5可以做什么

HTML5作為HTML標(biāo)準(zhǔn)，你當(dāng)然可以用它來實(shí)現(xiàn)之前HTML可以實(shí)現(xiàn)的功能，除此之外，我們還可以用HTML5做以下特別的事情：

1、本地存儲(chǔ)

基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB(html5本地存儲(chǔ)最重要的技術(shù)之一)和API說明文檔。

2、實(shí)現(xiàn)多媒體更加簡(jiǎn)單

我們可以利用HTML5的和&[......]

之前在介紹HTML5 input新增的幾種類型(數(shù)字、日期、顏色選取、范圍)時(shí)，曾實(shí)現(xiàn)了一些頁(yè)面例子讓大家參考，但這些例子里的背景文字都是灰色的，樣式很單一，其實(shí)它們可以做的更好看，CSS3里提供了專門的規(guī)則屬性來美化用placeholder實(shí)現(xiàn)的input輸入框的背景提示信息。下面我們來看看如何用專用的CSS屬性來美化具有placeholder屬性的Input輸入框。

CSS代碼

在火狐瀏覽器中的寫法和在谷歌瀏覽器和Safari里的寫法有些不同，但相信以后會(huì)統(tǒng)一。

/* 通用 */

::-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[......]

你可能已經(jīng)聽說過，

下面是這幾種新型input類型的實(shí)例演示，可能在不同的瀏覽器上它們的樣式會(huì)稍微有些變化，但基本的功能都是一樣的。

html5中的新型input類型

數(shù)字型 type=”number”

效果：

日期型 type=”date”

效果：

顏色選擇器 type=”color”

[......]

11,234 人瀏覽

2014-06-12 21:35:43

這是一款基于HTML5 3D圖片切片滑塊旋轉(zhuǎn)動(dòng)畫，就非常不錯(cuò)，大家也可以看看。

這篇文章我們來看看什么是input輸入框背景文字提示效果，如下圖所示：

這種效果現(xiàn)在網(wǎng)上非常的普遍流行，但大部分是使用JavaScript實(shí)現(xiàn)的。但input文本框的標(biāo)記上添加HTML5規(guī)范里新增的placeholder屬性，然后在屬性值里輸入你需要的提示信息。

語法基本是這個(gè)樣子：

HTML代碼

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

CSS3里有相應(yīng)的通用的對(duì)Placeholder提示信息美化的方法。[......]

18,063 人瀏覽

2014-05-21 07:36:06

在手機(jī)端，有一個(gè)非常棒的工具叫做PhoneGap，使用這個(gè)快速開發(fā)平臺(tái)，任何人都可以使用HTML5+CSS3+JavaScript開發(fā)出安卓，iOS等應(yīng)用。PhoneGap的最好的一個(gè)特點(diǎn)是，你并不需要聯(lián)網(wǎng)，不需要連接web服務(wù)器，你可以從把它當(dāng)成本地桌面應(yīng)用。一旦下載到本地，它和本地原生應(yīng)用一樣可以離線使用。

通常我們會(huì)感覺網(wǎng)上有很多有趣的HTML應(yīng)用，但這些應(yīng)用非要你打開瀏覽器，輸入網(wǎng)址。其實(shí)我們更喜歡直接點(diǎn)擊桌面的一個(gè)圖標(biāo)就啟動(dòng)一個(gè)程序的這種體驗(yàn)。用HTML5+js開發(fā)的本地桌面應(yīng)用就是要提高給用戶這種體驗(yàn)，除了上面說的PhoneGap，還有一些像Pokki和Chrome Package Apps或Mozilla XUL Runner都是開發(fā)HTML5本地桌面應(yīng)用的框架。

Pokki和Chrome不僅可以用來開發(fā)HTML[......]

文章導(dǎo)航

第1頁(yè) 共2頁(yè)12?

總結(jié)

以上是生活随笔為你收集整理的html5资源怎么用,HTML5教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。