Maison  >  Article  >  interface Web  >  18 types d'effets d'animation de boutons de navigation de pagination verticale

18 types d'effets d'animation de boutons de navigation de pagination verticale

黄舟
黄舟original
2017-01-18 13:45:481936parcourir

Bref tutoriel

Il s'agit d'un ensemble d'effets d'animation très sympas pour les boutons de navigation de pagination verticale. Cet ensemble d'effets spéciaux comporte 18 effets généraux et peut être utilisé pour créer des boutons de navigation de pagination pour les diaporamas, le changement de page et d'autres changements de composants de conteneur.

Comment utiliser

la structure HTML

Ce qui suit est une démonstration dynamique GIF de l'un des effets d'animation du bouton de navigation de pagination verticale :

18 types deffets danimation de boutons de navigation de pagination verticale

La structure HTML pour générer l'effet de navigation de pagination verticale ci-dessus est la suivante :

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

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

Ensuite, l'effet Wanwei zahi définit le CSS unique Style :

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

Veuillez vous référer au fichier de téléchargement pour d'autres effets.

Ce qui précède est le contenu de 18 effets d'animation de boutons de navigation de pagination verticale. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn