18种垂直分页导航按钮动画特效

PetitQ 图片/图形, 布局框架 2019-3-15 1.41K 0 0

这是一组效果非常炫酷的垂直分页导航按钮动画特效。这组特效通用 18 种效果，可以用于制作幻灯片、页面切换和其它容器组件切换的分页导航按钮。

HTML 结构

生成上面的垂直分页导航效果的 HTML 结构如下：

也想出现在这里？联系我们吧

```
<nav class="nav nav--timiro">
```

  <button class="nav__item" aria-label="Item 1"></button>

  <button class="nav__item nav__item--current" aria-label="Item 2"></button>

  <button class="nav__item" aria-label="Item 3"></button>

  <button class="nav__item" aria-label="Item 4"></button>

  <button class="nav__item" aria-label="Item 5"></button>

  <button class="nav__item" aria-label="Item 6"></button>

  <button class="nav__item" aria-label="Item 7"></button>

  <button class="nav__item" aria-label="Item 8"></button>

```
</nav>
```

CSS 样式

```
.nav {
```
```
  position: relative;
```
```
  width: 8em;
```
```
  margin: 0 0 0 3em;
```
```
}
```
```
 
```
```
.nav__item {
```
```
  line-height: 1;
```
```
  position: relative;
```
```
  display: block;
```
```
  margin: 0;
```
```
  padding: 0;
```
```
  letter-spacing: 0;
```
```
  color: currentColor;
```
```
  border: 0;
```
```
  background: none;
```
```
}
```
```
 
```
```
.nav__item:focus {
```
```
  outline: none;
```
```
}
```

然后万维 zahi 效果设置特有的 CSS 样式：

```
/*** Zahi ***/
```
```
 
```
```
.nav--zahi .nav__item {
```
```
  width: 2em;
```
```
  height: 2em;
```
```
}
```
```
 
```
```
.nav--zahi .nav__item::before,
```
```
.nav--zahi .nav__item::after {
```
```
  content: '';
```
```
  position: absolute;
```
```
}
```
```
 
```

.nav--zahi .nav__item:not(:last-child)::before {

```
  top: calc(2em - 9px);
```
```
  left: 5px;
```
```
  width: 2px;
```
```
  height: calc(2em - 12px);
```
```
  background: #98322a;
```
```
}
```
```
 
```
```
.nav--zahi .nav__item::after {
```
```
  top: 50%;
```
```
  left: 0;
```
```
  width: 12px;
```
```
  height: 12px;
```
```
  margin: -5px 0 0 0;
```
```
  border: 2px solid #98322a;
```
```
  border-radius: 50%;
```
```
  background: #f44336;
```

  -webkit-transition: -webkit-transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;

  transition: transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;

```
}
```
```
 
```
```
.nav--zahi .nav__item--current::after {
```
```
  border-width: 1px;
```
```
  border-color: #fff;
```

  -webkit-transform: scale3d(1.6,1.6,1);

```
  transform: scale3d(1.6,1.6,1);
```
```
}
```
```
 
```

.nav--zahi .nav__item:not(.nav__item--current):focus::after,

.nav--zahi .nav__item:not(.nav__item--current):hover::after {

```
  border-color: #fff;
```
```
  background: #fff;
```
```
}
```
```
 
```
```
.nav--zahi .nav__item-title {
```

  font-family: 'Roboto Condensed', sans-serif;

```
  line-height: 1.5;
```
```
  display: block;
```
```
  position: relative;
```
```
  padding: 0 0 0 2.5em;
```
```
  white-space: nowrap;
```
```
  opacity: 0.3;
```
```
  color: #98322a;
```

  -webkit-transition: opacity 0.3s, color 0.3s;

```
  transition: opacity 0.3s, color 0.3s;
```
```
}
```
```
 
```

.nav--zahi .nav__item:not(.nav__item--current):focus .nav__item-title,

.nav--zahi .nav__item:not(.nav__item--current):hover .nav__item-title {

```
  opacity: 0.5;
```
```
}
```
```
 
```

.nav--zahi .nav__item--current .nav__item-title {

```
  opacity: 1;
```
```
  color: #fff;
```
```
}
```

其它效果的制作请参考下载文件。
Codrops 地址：http://tympanus.net/codrops/2016/09/02/inspiration-navigation-indicators/

18 种垂直分页导航按钮动画特效

已有 353 人购买

永久更新：
演示数据：
提取码：cpj5

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

18种垂直分页导航按钮动画特效

HTML 结构

CSS 样式

18 种垂直分页导航按钮动画特效

相关文章

文章页面网格布局页面UI设计

Material Design 风格信息卡片UI设计

Windows8 风格打开面板动画UI设计

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

18 种垂直分页导航按钮动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复