Design effect of pure CSS3 column surface plate

Brief tutorials

This is a vertical column surface panel design effect made with CSS3. The list panel can be used to make a list of articles, row and column lists, and so on. The list item will have a cool ribbon floating animation effect when the user is using the mouse to slide through the list item.

How to use

HTML structure

The HTML structure of the list panel is as follows: Use a <div> element to wrap a set of ordered list elements.

<div class= "leaderboard" > 
CSS Styles

The Ribbon effect of a list item uses the list item Li element's: Before and: After pseudo-elements to make, by default their transparency opacity to 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;}
When the mouse hovers over the list item, the transparency of the ribbon opacity is set to 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;}
Please refer to the download file for full CSS code.



Above is pure CSS3 column Surface board design effect content, more related content please pay attention to topic.alibabacloud.com (www.php.cn)!

