순수한 CSS3 목록 패널 디자인 효과-CSS 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-01-19 14:11:46

원래의

1772명이 탐색했습니다.

간단한 튜토리얼

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 중국어 홈페이지(www.php.cn)를 참고해주세요!