18 Arten von Animationseffekten für vertikale Navigationsschaltflächen

Kurzes Tutorial

Dies ist eine Reihe sehr cooler Animationseffekte für vertikale Navigationsschaltflächen. Dieser Satz von Spezialeffekten verfügt über 18 allgemeine Effekte und kann zum Erstellen von Seitennavigationsschaltflächen für Diashows, zum Seitenwechsel und zum Wechseln anderer Containerkomponenten verwendet werden.

So verwenden Sie

HTML-Struktur

Das Folgende ist eine dynamische GIF-Demonstration eines der Animationseffekte der vertikalen Seitennavigationsschaltfläche:

Die HTML-Struktur zum Generieren des oben genannten vertikalen Paging-Navigationseffekts lautet wie folgt:

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

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

Dann legt der Wanwei-Zahi-Effekt das eindeutige CSS fest Stil:

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

Weitere Effekte finden Sie in der Download-Datei.

Das Obige ist der Inhalt von 18 Arten von Animationseffekten für vertikale Paging-Navigationsschaltflächen. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!