預覽：
效果圖：
箭頭其實就是一張，然後用2個相同的dom元素，利用css的縮放動畫，使其中乙個元素延遲發生動畫，2個間隔的閃爍，即可實現出晃動的效果。具體**如下：
2
<
aclass
="s-xguide-down trans"
href
=""onclick
="return false;"
hidefocus=""
>
>
<
aclass
="s-xguide-down arrow-1 trans"
href
=""onclick
="return false;"
hidefocus=""
>
>
.s-xguide
-down @
keyframes
xguide_down 50
% }
@-webkit
-keyframes
xguide_down 50
% }
@-moz-
keyframes
xguide_down 50
% }
@-o-
keyframes
xguide_down 50
% }
.s-xguide
-down
.trans .
s-xguide
-down
.arrow-1
css裡面，主要用到了css3的@keyframes生成動畫，利用transform變換中的scale縮放變形，及配合透明度實現。對於ie，則只顯示，沒有動畫並無其他影響。
利用css3實現箭頭
在一些開發中，經常會用到一些箭頭，如圖所示 要實現圖上的搶這個箭頭，傳統的做法就是切一張這樣的，然後最為背景圖就行了。但考慮到節約載入資源以及css3的強大特性，我們完全可以用css3來實現如圖需求。class info r class btn 搶span div info r 這樣就可以了。利用這...
css3動畫特效 上下晃動的div
上下晃動 transform origin 設定旋轉元素的基點位置 animation name 設定動畫名稱 animation duration 設定動畫時間 transition timing function cubic bezier 貝塞爾曲線效果，它有四個值，指在x軸與y軸的兩個曲線的點...
利用CSS3特性巧妙實現漂亮的DIV箭頭
還有傲遊 的導航條 像傲遊賬戶上方這種箭頭更需要多幅以表現箭頭和hover的效果。實現的原理是 我們可以將箭頭看作是乙個矩形或者菱形的乙個角，使用css3的屬性transform來實現矩形的旋轉。朝上的箭頭需要將矩形旋轉45度，我們使用transform rotate 45deg 來實現，另外針對不...