html自动播放图箭头,html5制作焦点图左右导航箭头样式

本教程将和大家分享一些焦点图左右导航按箭头按钮的动画样式。观察任意一个网站上的焦点图，它们都带有一对很小的左右导航箭头按钮。它们的尺寸太小以至于用户不容易发现它们。今天我们要创建的效果是当用户用鼠标滑过它们时，箭头会产生动画或一些提示信息。

注意：这些效果只能在现代浏览器上运行，请确保您的浏览器支持这些效果。另外请注意，我们使用的一些Hover效果对于触摸屏是不支持的。

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: #b1