순수한 CSS3 목록 패널 디자인 효과

간단한 튜토리얼

CSS3를 이용하여 만든 세로형 목록 패널 디자인 효과입니다. 이 목록 패널을 사용하여 기사 목록, 순위 목록 등을 만들 수 있습니다. 사용자가 마우스로 목록 항목 위로 슬라이드하면 목록 항목에 멋진 리본 부동 애니메이션 효과가 나타납니다.

사용법

HTML 구조

목록 패널의 HTML 구조는 다음과 같습니다. 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>

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

목록 항목 위에 마우스를 올리면 리본의 투명도 불투명도가 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 중국어 홈페이지(www.php.cn)를 참고해주세요!