<
div
class
="arrow arrow-left-middle"
>
arrow-left-middle
div>
<
div
class
="arrow arrow-left-top"
>
arrow-left-top
div>
<
div
class
="arrow arrow-left-bottom"
>
arrow-left-bottom
div>
<
div
class
="arrow arrow-left-middle-move"
>
arrow-left-middle-move
div>
<
div
class
="arrow arrow-left-top-move"
>
arrow-left-top-move
div>
<
div
class
="arrow arrow-left-bottom-move"
>
arrow-left-bottom-move
div>
.arrow
/*設定位置和border的顏色-需要與 4(4面) * 3(上中下) * 2(移動) = 24
*/.arrow-left-top:before,
.arrow-left-top-move:before,
.arrow-left-middle:before,
.arrow-left-middle-move:before,
.arrow-left-bottom:before,
.arrow-left-bottom-move:before.arrow-left-top:before,
.arrow-left-top-move:before,
.arrow-left-middle:before,
.arrow-left-middle-move:before,
.arrow-left-bottom:before,
.arrow-left-bottom-move:before
/*中間
*/.arrow-left-middle-move:before,
.arrow-left-middle:before
/*頂部
*/.arrow-left-top:before,
.arrow-left-top-move:before
/*底部
*/.arrow-left-bottom:before,
.arrow-left-bottom-move:before.arrow-left-middle-move:hover:before,
.arrow-left-top-move:hover:before,
.arrow-left-bottom-move:hover:before,
.arrow-left-middle:hover:before,
.arrow-right-middle-move:hover,
.arrow-left-top:hover:before,
.arrow-right-top-move:hover,
.arrow-right-bottom-move:hover,
.arrow-left-bottom:hover:before.arrow-right-middle-move:hover:before,
.arrow-right-top-move:hover:before,
.arrow-right-bottom-move:hover:before,
.arrow-right-middle:hover:before,
.arrow-left-middle-move:hover,
.arrow-right-top:hover:before,
.arrow-left-top-move:hover,
.arrow-left-bottom-move:hover,
.arrow-right-bottom:hover:before
更多專業前端知識，請上
【猿2048】www.mk2048.com
CSS 按鈕特效
通過偽元素實現下圖效果 html rabbitcss body a a after a hover after 想要從中間開始擴張開來，需要偽元素設定position absolute 然後把top和left都設定成50 再通過transform的translate設定回 50 這個作用是讓元素從中...
CSS3 按鈕特效 一
其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...
CSS3 按鈕特效 一
其實使用背景顏色變化就可以的 但是這裡為了做統一 fade before,fade after fade left before,fade right before,fade center out before,fade center out after,fade center in before,...