Reiner CSS3-Listenpanel-Designeffekt

Kurzes Tutorial

Dies ist ein Designeffekt für vertikale Listenfelder, der mit CSS3 erstellt wurde. Mit diesem Listenpanel können Artikellisten, Ranglisten usw. erstellt werden. Wenn der Benutzer mit der Maus über die Listenelemente fährt, erhalten die Listenelemente einen coolen schwebenden Animationseffekt.

Verwendung

HTML-Struktur

Die HTML-Struktur des Listenbereichs ist wie folgt: Verwenden Sie ein

-Element, um einen Satz geordneter Listenelemente einzuschließen.

<div class="leaderboard">
    <h1>
      <svg class="ico-cup">
        <use xlink:href="#cup"></use>
      </svg>
      Most active Players
    </h1>
    <ol>
      <li>
        <mark>Jerry Wood</mark>
        <small>315</small>
      </li>
      <li>
        <mark>Brandon Barnes</mark>
        <small>301</small>
      </li>
      <li>
        <mark>Raymond Knight</mark>
        <small>292</small>
      </li>
      <li>
        <mark>Trevor McCormick</mark>
        <small>245</small>
      </li>
      <li>
        <mark>Andrew Fox</mark>
        <small>203</small>
      </li>
    </ol>
  </div>
</div>

CSS-Stil

Der Ribbon-Effekt des Listenelements wird mithilfe der :before- und :after-Pseudoelemente des Listenelements li erstellt. Standardmäßig ist ihre Transparenz-Deckkraft 0,.

.leaderboard ol li mark {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 18px 10px 18px 50px;
  margin: 0;
  background: none;
  color: #fff;
}
.leaderboard ol li mark::before, .leaderboard ol li mark::after {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: -11px;
  left: -9px;
  border-top: 10px solid #c24448;
  border-left: 10px solid transparent;
  -webkit-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
  opacity: 0;
}
.leaderboard ol li mark::after {
  left: auto;
  right: -9px;
  border-left: none;
  border-right: 10px solid transparent;
}
.leaderboard ol li small {
  position: relative;
  z-index: 2;
  display: block;
  text-align: right;
}
.leaderboard ol li::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fa6855;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  opacity: 0;
}

Wenn die Maus über das Listenelement gleitet, wird die Transparenz-Deckkraft des Menübands auf 1 eingestellt.

.leaderboard ol li:hover::after {
  opacity: 1;
  -webkit-transform: scaleX(1.06) scaleY(1.03);
          transform: scaleX(1.06) scaleY(1.03);
}
.leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after {
  opacity: 1;
  -webkit-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
}

Den vollständigen CSS-Code finden Sie in der Download-Datei.

Das Obige ist der Inhalt des reinen CSS3-Listenpanel-Designeffekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn