18 kinds of vertical paging navigation button animation effects

黄舟
Release: 2017-01-18 13:45:48
Original
1951 people have browsed it

简要教程

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

使用方法

 HTML结构

下面是这组垂直分页导航按钮动画特效中的其中一种效果的GIF动态演示图:

18 kinds of vertical paging navigation button animation effects

生成上面的垂直分页导航效果的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>
Copy after login

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;
}
Copy after login

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

/*** Zahi ***/
 
.nav--zahi .nav__item {
  width: 2em;
  height: 2em;
}
 
.nav--zahi .nav__item::before,
.nav--zahi .nav__item::after {
  content: &#39;&#39;;
  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: &#39;Roboto Condensed&#39;, 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;
Copy after login

其它效果的制作请参考下载文件。

以上就是18种垂直分页导航按钮动画特效的内容,更多相关内容请关注PHP中文网(www.php.cn)!


source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template