当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

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

简介

##### HTML结构

生成上面的垂直分页导航效果的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样式
```html
.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样式：

```html
/*** 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;
}                
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果