Effet de conception de panneau de liste CSS3 pur

Bref tutoriel

Il s'agit d'un effet de conception de panneau de liste verticale réalisé à l'aide de CSS3. Ce panneau de liste peut être utilisé pour créer des listes d'articles, des listes de classement, etc. Lorsque l'utilisateur glisse sur les éléments de la liste avec la souris, les éléments de la liste auront un effet d'animation flottant avec un ruban sympa.

Utilisation

Structure HTML

La structure HTML du panneau de liste est la suivante : Utilisez un élément dc6dce4a544fdca2df29d5ac0ea9906b

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

Style CSS

L'effet ruban de l'élément de liste est réalisé à l'aide des pseudo-éléments :before et :after de l'élément li de l'élément de liste. Par défaut, leur opacité de transparence est. 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;
}

Lorsque la souris glisse sur l'élément de la liste, l'opacité de transparence du ruban est définie sur 1,.

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

Veuillez vous référer au fichier de téléchargement pour le code CSS complet.

Ce qui précède est le contenu de l'effet de conception de panneau de liste CSS3 pur. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !