本教程將和大家分享一些焦點圖左右導航按箭頭按鈕的動畫樣式。觀察任意一個網站上的焦點圖，它們都帶有一對很小的左右導航箭頭按鈕。它們的尺寸太小以至于用戶不容易發現它們。今天我們要創建的效果是當用戶用鼠標滑過它們時，箭頭會產生動畫或一些提示信息。

注意：這些效果只能在現代瀏覽器上運行，請確保您的瀏覽器支持這些效果。另外請注意，我們使用的一些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: #b1a798;

transition: background-color 0.3s;

}

.nav-thumbflip svg.icon {

position: relative;

top: 50%;

transition: fill 0.3s;

transform: translateY(-50%);

fill: #fff;

}

.nav-thumbflip img {

position: absolute;

top: 0;

transition: transform 0.3s;

backface-visibility: hidden;

}

.nav-thumbflip a.prev img {

left: 100%;

transform: rotateY(90deg);

transform-origin: 0% 50%;

}

.nav-thumbflip a.next img {

right: 100%;

transform: rotateY(-90deg);

transform-origin: 100% 50%;

}

.nav-thumbflip a:hover .icon-wrap {

background-color: #fff;

}

.nav-thumbflip a:hover svg.icon {

fill: #c1b8ab;

}

.nav-thumbflip a:hover img {

transform: rotateY(0deg);

}

請注意我們有些通用樣式沒有列出來，請查看下載的文件。

以下列出了一些完成的效果：

本教程就到這里，希望對你有所幫助。

總結

以上是生活随笔為你收集整理的html自动播放图箭头,html5制作焦点图左右导航箭头样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。