效果图：

描述说明：

使用方法

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;
}

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/262.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意