Kurzes Tutorial
Dies ist ein Designeffekt für vertikale Listenfelder, der mit CSS3 erstellt wurde. Mit diesem Listenpanel können Artikellisten, Ranglisten usw. erstellt werden. Wenn der Benutzer mit der Maus über die Listenelemente fährt, erhalten die Listenelemente einen coolen schwebenden Animationseffekt.
Verwendung
HTML-Struktur
Die HTML-Struktur des Listenbereichs ist wie folgt: Verwenden Sie ein
<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-Stil
Der Ribbon-Effekt des Listenelements wird mithilfe der :before- und :after-Pseudoelemente des Listenelements li erstellt. Standardmäßig ist ihre Transparenz-Deckkraft 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; }
Wenn die Maus über das Listenelement gleitet, wird die Transparenz-Deckkraft des Menübands auf 1 eingestellt.
.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; }
Den vollständigen CSS-Code finden Sie in der Download-Datei.
Das Obige ist der Inhalt des reinen CSS3-Listenpanel-Designeffekts. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!