純粋な CSS3 リストパネルのデザイン効果-CSSチュートリアル-php.cn

純粋な CSS3 リストパネルのデザイン効果

黄舟

リリース： 2017-01-19 14:11:46

オリジナル

1803 人が閲覧しました

簡単なチュートリアル

これは、CSS3 を使用して作成された垂直リストパネルのデザイン効果です。このリストパネルは、記事リストやランキングリストなどを作成するために使用できます。ユーザーがマウスでリスト項目上をスライドすると、リスト項目にはクールなリボンのフローティングアニメーション効果が表示されます。

使用方法

HTML 構造

リストパネルの HTML 構造は次のとおりです:

要素を使用して、順序付けられたリスト要素のセットをラップします。

<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 スタイル

リスト項目のリボン効果は、リスト項目 li 要素の :before および :after 疑似要素を使用して作成されます。デフォルトでは、透明度の不透明度は 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;
}

ログイン後にコピー

マウスをリスト項目上でスライドさせると、リボンの透明度の不透明度が 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;
}

ログイン後にコピー

完全な CSS コードについては、ダウンロードファイルを参照してください。

上記は純粋な CSS3 リストパネルデザイン効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。