html5胶囊式导航颜色,html5 svg焦点图导航箭头按钮样式

任意一款焦点图或幻灯片在图片的左右两侧都带有前后导航的箭头按钮，本款html5插件使用html5 svg和css3实现了15种不同效果的焦点图导航箭头按钮动画效果。

HTML结构

下面是其中一种效果的html结构：

CSS代码

.nav-thumbflip a {

perspective: 1000px;

}

.nav-thumbflip a.prev {

perspective-origin: 100% 50%;

}

.nav-thumbflip a.next {

perspective-origin: 0% 50%;

}

.nav-thumbflip .icon-wrap {

display: block;

width: 100px;

height: 100px;

background-color: #b1a798;

transition: background-color 0.3s;

}

.nav-thumbflip svg.icon {

position: relative;

top: 50%;