18 Vertical Pager Buttons animated effects

Brief tutorials

This is a set of very cool vertical pager button animation effect. This set of effects is universally available in 18 effects and can be used to make slide navigation buttons for slides, page transitions, and other container component transitions.

How to use

HTML structure

The following is a animated GIF demo of one of the effects of this set of vertical pager button animation effects:

The HTML structure that generates the above vertical pager effect is as follows:

<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 Styles

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

Then the worldwide Zahi effect sets the unique CSS style:

/*** 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;

For other effects, please refer to the download file.

Above is the content of 18 kinds of vertical pager button animation effect, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

