간단한 튜토리얼
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: ''; 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)를 참고해주세요!