用HTML5和CSS3完美實現網頁中動起來的箭頭

們經常看到許多網站或者H5的動畫都做成了整屏切換的形式，為提高用戶體驗，會在首屏頁面下方放上一個動態的向下箭頭來提示用戶切換至下一屏。

動態箭頭的效果圖如下：

那么這種效果是如何實現的呢？

其實非常簡單，在CSS3中提供了animation屬性，專門用于動畫。要使用這個屬性，需要先了解@keyframes的創建規則，在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。

在這個動畫中，我們能夠看出在整個動畫中改變的是箭頭的位置，所以我們在創建動畫時，只需要給定箭頭的起始位置，利用animation讓他動起來就可以了。

接下來，我們一步一步完成。

1、首先找到你所需要的箭頭圖片，將他利用定位的方式放在首屏的底部。

a)html代碼（將圖片以背景或者插入圖片的形式放入標簽內，demo以背景形式展示）

b)css代碼（利用定位將箭頭放在首屏的底部適當位置，網站中大部分情況會進行左右居中）

2、然后進行動畫創建，最簡單的方式就是只給定初始的以及結束的css樣式即可。

css 代碼

標注出來的為動畫的自定義名稱，可以根據你的動畫行為來定義。

0%為初始狀態，即剛開始動畫時。

100%為結束狀態，即動畫進行到100%時。

動畫改變了箭頭的底部位置，由距離底部80像素變到了距離底部0像素。

3、接下來利用animation屬性讓他具有動畫效果

css代碼：

第一個參數表示你所使用的動畫的名稱（即我們創建的動畫的動畫名稱），

第二個參數表示動畫完成的時間（即由0%到100%所用的時間），

第三個參數表示動畫執行的次數（可以為任意數字，infinite表示規定動畫無限次播放），因此造成了一個動態的箭頭的視覺效果。

通過以上三個步驟即可完成這個簡單的動畫效果，很多的動畫效果都可以通過創建動畫的方式來實現。

原文地址北京市盛世陽光文化傳播有限責任公司：http://www.gonet.com.cn/webduirshow-140.html

我們的開發工程中經常會使用到各種圖，所謂的圖就是由節點和節點之間的連接所形成的系統，數學上專門有一個分支叫圖論（Graph Theroy）。利用圖我們可以做很多工具，比如思維導圖，流程圖，狀態機，組織架構圖，等等。今天我要做的是用開源的HTML5工具來快速構造一個做圖的工具。

工具選擇

工預善其事，必先利其器。第一件事是選擇一件合適的工具，開源時代，程序員還是很幸福的，選擇很多。

flowchart.js http://adrai.github.io/flowchart.js/ , 基于SVG創建Flow Chart
go.js http://www.gojs.net/latest/index.html go.js 提供一整套的JS工具，支持各種交互式圖表的創建。有免費版和收費版
joint.js http://www.jointjs.com/ joint.js 是另一個創建圖標庫的工具，也提供免費版和商業版
jsPlumb http://www.jsplumb.org/ jsPlumb是一套開源的流程圖創建工具，小巧精悍，使用簡單
d3 http://d3js.org 在html5領域，d3可謂是最好的可視化基礎庫，提供方面的DOM操作，非常強大。

最終，我選擇了jsPlumb，因為它完全開源，使用很簡單，用D3的話可能會多花很多功夫。joint.js也不錯。大家可以根據自己的需要選擇。

構建靜態應用

下面我們一步一步的來使用jsPlumb來創建我們的流程圖工具。

第一步是等待DOM和jsPlumb初始化完畢，類似document.ready()和jquery.ready(), 要使用jsPlumb, 需要把代碼放在這個函數里：

jsPlumb.ready(function()?{
????//?...?your?code?goes?here?...
}

創建一個jsPlumb的實例，并初始化jsPlumb的配置參數：

//Initialize?JsPlumb
var?color?=?"#E8C870";
var?instance?=?jsPlumb.getInstance({
????//?notice?the?'curviness'?argument?to?this?Bezier?curve.??the?curves?on?this?page?are?far?smoother
????//?than?the?curves?on?the?first?demo,?which?use?the?default?curviness?value.??????
????Connector?:?[?"Bezier",?{?curviness:50?}?],
????DragOptions?:?{?cursor:?"pointer",?zIndex:2000?},
????PaintStyle?:?{?strokeStyle:color,?lineWidth:2?},
????EndpointStyle?:?{?radius:5,?fillStyle:color?},
????HoverPaintStyle?:?{strokeStyle:"#7073EB"?},
????EndpointHoverStyle?:?{fillStyle:"#7073EB"?},
????Container:"container-id"
?});

這里給給出了一些配置包括，連接線（這里配置了一個貝塞爾曲線），線的風格，連接點得風格。Container需要配置一個對應的DIV容器的id。（這里也可以使用setContainer的方法）

下面我們要創建一個節點（node），每一個節點可以用一個DIV來實現。我這里提供了一個函數來創建節點。

function?addNode(parentId,?nodeId,?nodeLable,?position)?{
??var?panel?=?d3.select("#"?+?parentId);
??panel.append('div').style('width','120px').style('height','50px')
????.style('position','absolute')
????.style('top',position.y).style('left',position.x)
????.style('border','2px?#9DFFCA?solid').attr('align','center')
????.attr('id',nodeId).classed('node',true)
????.text(nodeLable);

??return?jsPlumb.getSelector('#'?+?nodeId)[0];
}

這里做的事情就是創建了一個DIV元素，并放在對應的容器的制定位置上，注意為了支持拖拽的功能，必須使用position:absolute 。

我使用D3來操作DOM，大家可能會更習慣JQuery，這純屬個人喜好的問題。

最后返回創建節點的實例引用，這是的selector使用了jsPlumb.getSelector()方法，它和JQuery的selector是一樣的，這樣用的好處是你可以使用不同的DOM操作庫，例如Vanilla

下面我使用一個函數來創建端點/錨點（anchor），錨點就是節點上的連接點，用于連接不同的節點。

function?addPorts(instance,?node,?ports,?type)?{
??//Assume?horizental?layout
??var?number_of_ports?=?ports.length;
??var?i?=?0;
??var?height?=?$(node).height();??//Note,?jquery?does?not?include?border?for?height
??var?y_offset?=?1?/?(?number_of_ports?+?1);
??var?y?=?0;

??for?(?;?i?<?number_of_ports;?i++?)?{
????var?anchor?=?[0,0,0,0];
????var?paintStyle?=?{?radius:5,?fillStyle:'#FF8891'?};
????var?isSource?=?false,?isTarget?=?false;
????if?(?type?===?'output'?)?{
??????anchor[0]?=?1;
??????paintStyle.fillStyle?=?'#D4FFD6';
??????isSource?=?true;
????}?else?{
??????isTarget?=true;
????}

????anchor[1]?=?y?+?y_offset;
????y?=?anchor[1];

????instance.addEndpoint(node,?{
??????uuid:node.getAttribute("id")?+?"-"?+?ports[i],
??????paintStyle:?paintStyle,
??????anchor:anchor,
??????maxConnections:-1,
??????isSource:isSource,
??????isTarget:isTarget
????});
??}
}

instance是jsPlumb的實例

node是我們用addNode方法創建的Node實例

ports，是一個string的數組，指定端點的個數和名字

type，可能是output或者input，指定端點的種類，一個節點的輸出端口可以連接另一個節點的輸入端口。

這里anchor是一個四維數組，0維和1維分別是錨點在節點x軸和y軸的偏移百分比。我這里希望把端口畫在節點的左右兩側，并按照端口的數量均勻分布。

最后使用instance.addEndpoint來創建端點。注意這里只要指定isSource和isTarget就可以用drag&drop的方式來連接端點，非常方便。

下面一步我們提供一個函數來連接端點：

function?connectPorts(instance,?node1,?port1,?node2?,?port2)?{
??//?declare?some?common?values:
??var?color?=?"gray";
??var?arrowCommon?=?{?foldback:0.8,?fillStyle:color,?width:5?},
??//?use?three-arg?spec?to?create?two?different?arrows?with?the?common?values:
??overlays?=?[
????[?"Arrow",?{?location:0.8?},?arrowCommon?],
????[?"Arrow",?{?location:0.2,?direction:-1?},?arrowCommon?]
??];

??var?uuid_source?=?node1.getAttribute("id")?+?"-"?+?port1;
??var?uuid_target?=?node2.getAttribute("id")?+?"-"?+?port2;

??instance.connect({uuids:[uuid_source,?uuid_target]});
}

node1和node2是源節點和目標節點的引用，port1和port2是源端口和目標端口的名字。

使用instance.connect方法來創建連接。 overlays用來添加連接線的箭頭效果或者其他風格，我這里沒有使用，因為覺得都不是很好看。大家如果要用，只要把overlays加入到instance.connect的方法參數就可以了。

調用以上方法來創建節點，端點和連接線。

var?node1?=?addNode('container-id','node1',?'node1',?{x:'80px',y:'20px'});
var?node2?=?addNode('container-id','node2',?'node2',?{x:'280px',y:'20px'});

addPorts(instance,?node1,?['out1','out2'],'output');
addPorts(instance,?node2,?['in','in1','in2'],'input');

connectPorts(instance,?node1,?'out2',?node2,?'in');

這里我們創建了兩個節點，第一個節點有兩個輸出端口，第二個節點有三個輸入端口，然后把第一個節點的out2端口連接到第二個端點的in端口。效果如下：

最后我們給節點增加drag&drop的功能，這樣我們就可以拖動這些節點來改變圖的布局了。

instance.draggable($('.node'));

這里似乎依賴于JQuery-UI,我還不是很清楚。

交互式創建節點

我們已經初步具有了創建圖的功能，可是節點的創建必須通過程序，我們希望用交互的方式來創建節點。

通常我們希望有一個tree view的控件，讓后通過拖拽來創建對應類型的節點。這里我使用了這個開源的tree view，基于bootstrap https://github.com/jonmiles/bootstrap-treeview

我們先創建一個tree view：

function?getTreeData()?{
??var?tree?=?[
????{
??????text:?"Nodes",
??????nodes:?[
????????{
??????????text:?"Node1",
????????},
????????{
??????????text:?"Node2"
????????}
??????]
????}
??];?

??return?tree;
}
//Initialize?Control?Tree?View
$('#control-panel').treeview({data:?getTreeData()});

樹上有兩個節點:

然后我實現從樹上拖拽對應的節點，到流程圖上的邏輯。

//Handle?drag?and?drop
$('.list-group-item').attr('draggable','true').on('dragstart',?function(ev){
??//ev.dataTransfer.setData("text",?ev.target.id);
??ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
??console.log('drag?start');
});

$('#container-id').on('drop',?function(ev){
??//avoid?event?conlict?for?jsPlumb
??if?(ev.target.className.indexOf('_jsPlumb')?>=?0?)?{
????return;
??}

??ev.preventDefault();
??var?mx?=?''?+?ev.originalEvent.offsetX?+?'px';
??var?my?=?''?+?ev.originalEvent.offsetY?+?'px';

??console.log('on?drop?:?'?+?ev.originalEvent.dataTransfer.getData('text'));
??var?uid?=?new?Date().getTime();
??var?node?=?addNode('flow-panel','node'?+?uid,?'node',?{x:mx,y:my});
??addPorts(instance,?node,?['out'],'output');
??addPorts(instance,?node,?['in1','in2'],'input');
??instance.draggable($(node));
}).on('dragover',?function(ev){
??ev.preventDefault();
??console.log('on?drag?over');
});

這里要注意的是要避免和jsPlumb拖拽端點的邏輯沖突，當檢測到target是jsPlumb對象是需要直接從drop方法中退出以執行對應的jsPlumb的drop邏輯。

好了，一個繪制流程圖的軟件工具初步完工。

我把代碼放在oschina的代碼托管服務上了，大家有興趣可以去試試。

TML5和CSS3現在越來越備受網站建設者們的關注，它既簡單，且網頁版也好看。那么生成器就在自動生成代碼時扮演者重要角色，它們非常適用于那些要做很多重復性工作的開發人員和設計人員，生成器可以幫他們解決這些繁瑣的工作。在本文中，我們精心挑選了一些經驗豐富開發人員和設計人員常用HTML5、CSS3代碼生成器。

HTML5代碼生成器

網上有五六種可以生成優質代碼的HTML5生成器，其中的真諦是HTML5樣板文件，我們不要自以為然的把樣板文件當成是生成器，雖說這樣，大多數開發者還是把它當作是他們第一個網站的模板。回到主題，要找到一個好的HTML5生成器并不是那么容易的事，因為網上有成千上萬的網站提供各種各樣的代碼生成器。正因為如此，我們經常會被搞的稀里糊涂。不過，我們還是設法找到了一些比較好的生成器在本文中分享給大家。

Shikiryu HTML5生成器

Shikiryu HTML5生成器可以讓你為應用程序添加一個中介器，而且很多人都喜歡這么用。你可以在模板里面增加特性和修改布局。事實上，這個是非常實用的。開發人員更鐘愛這個生成器，因為相比其他的生成器，這個語義性更強，更易懂。

Initializr生成器

如果你要新建一個以HTML5樣板文件為基礎的項目，這將是你要開始你項目的好工具。它可以生成一個簡潔的可自定義的模板。當你從各式各樣的框架和類庫中選擇或是自定義模板時，模板就會以壓縮文件的格式下載下來，然后你就可以拿這些代碼來設計你的網站了。

Quackit HTML5生成器

Quackit 不僅可以給你提供一系列的代碼，還允許你輸入你的所有信息。這對初學者非常有幫助。所以，如果一開始你學的是CSS和html，你就可以用這個生成器來簡化你的工作任務了。這些生成器可以說是非常棒的，因為它們專注于圓角邊框，陰影，顏色漸變以及和html5模板的設計。

Modernizr生成器

Modernizr是一個開源的腳本類庫，它可以幫助你建立HTML5和CSS3來使你的網站更強大。這樣你就可以創建一些很好的，而且可以完美運行你代碼的網站，不管用戶用的是什么樣的瀏覽器或是什么樣的設備，都能優雅的展現。

CSS 代碼生成器

CSS3 Maker

你可以很容易在網上找到這個生成器。一旦你開始用這個生成器，我相信你一定會完全依賴它的。有了它，你可以做很多動畫、自定義字體、文本滾動、盒子模型陰影、圓角邊框、文字陰影、過渡、漸變等等方面的效果。

個人而言，我是很喜歡這個生成器， CSS3.me是由設計師Eric Hoffman設計出來的。它使用起來很簡便，是一個輕量級的、個性化而又功能強大的生成器。你可以用它來設置透明度、下拉陰影，改變和設置圓角邊框，增加漸變效果等等。

CSS3-Tricks 按鈕生成器

這是一個很經典古老的按鈕生成器，它是非常線性的，而且沒有圖形界面。你可以在你的項目中用它來生成沒有任何效果的按鈕。

圖片邊框和圓角邊框生成器

1.圓角邊框生成器（Border-Radius）

這是個非常好的、輕量級的工具，主要拿來設置邊角的圓角邊框。一旦完成了邊角設置，就可以在瀏覽器上檢查你想要包含的前綴，這些都是已經完成了的。是個界面很簡潔友好的生成器。

2.圖片邊框生成器（Border-Image)

假如你要畫一個箭頭或是一個三角形時，想讓生成器把它平鋪到你的網站邊框或者是元素邊框。這是最好用的圖片邊框生成器，當它要復制圖片去找到最合適的邊框樣式時候。也就是說，屆時，你就可以操作設置它的大小、偏移量，可以平鋪這張圖片等等。開發者經常喜歡拿它來設置背景。

CSS3漸變效果生成器

Color Zilla Gradient 生成器

此編輯器綁定了非常多的特性，用起來也非常容易。你可以單單稍微移動一下畫筆就可以觀察到他們的變化。它也可以在瀏覽器上直接使用，非常適合在網頁上開發的開發人員和設計人員。

@fontface 生成器

這個生成器可以讓你上傳網頁上的字體或是系統里面的字體。然后生成一個可以拿來用的輸出文件。這個生成器給字體屬性生成了一個CSS文件，然后字體就可以顯示在HTML文件里了。這是一個非常好的檢查字體工具，尤其是你沒有足夠的時間去創建一個使用許多重復性字體的完整的網站時候。

CSS3下拉陰影生成器

Webestools 陰影生成器

如果你想要對下拉陰影效果有更深、更具體的運用，這個生成器是我最強烈推薦的。因為它自帶調節欄，外部陰影，內部陰影的設置，還可以設置陰影的顏色，偏移量和很多你意想不到的炫酷效果。

HTML5與CSS3如果協調的好，就會為您減輕部分工作壓力，且能節省更多的精力。工具的好壞取決于您怎么去使用/去看待的，希望此篇文章能給您有所本幫！

在線咨詢

上一篇：HTML5 新增的標簽
下一篇：彈出式菜單前端 html源碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

用HTML5和CSS3完美實現網頁中動起來的箭頭

工具選擇

構建靜態應用

交互式創建節點

您的項目需求