Reiner CSS3-Listenpanel-Designeffekt-CSS-Tutorial-php.cn

Reiner CSS3-Listenpanel-Designeffekt

黄舟

Freigeben： 2017-01-19 14:11:46

Original

1769 Leute haben es durchsucht

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>

Nach dem Login kopieren

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: &#39;&#39;;
  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: &#39;&#39;;
  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;
}

Nach dem Login kopieren

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

Nach dem Login kopieren

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