[CSS3技术]jQuery+CSS3动画的水平组合布局

[tr][td]




今天在本教程中，我们要创建水平的组合布局网站酷悬停效果。使用CSS3动画和过渡效果，以及一些jQuery来复制图像平移效果上悬停闪存悬停效果。


The Markup

 
[*]
 
 
 
 

 
 The Two and The Bubbles

 By Vlad Gerasimov

 
 
 2005


 
[*]
 

 
[*]
 

 

The CSS




.portfolio-items {
 height: 400px;
 overflow-x: scroll;
 overflow-y: hidden;
 white-space: nowrap;
 margin-bottom: 30px;
 position: relative;
}
.portfolio-items > li {
 display: inline-block;
 /*aligning items by top baseline makes sure the baseline doesn't change once the hover
 effect is fired and therefore the other items stay put*/
 vertical-align: top;
}
.item {
 width: 300px;
 height: 202px;
 margin: 150px 20px 0;
 padding: 5px;
 border-radius:2px;
 box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.5);
 background-color: white;
 font-size: 14px;
 /*initially all items are moved 300px up and faded out and rotated, they will fade
 into view and back to position later via javascript*/
 opacity: 0;
 position: relative;
 top: -300px;
 transform: rotate(-135deg);
 transition: all .3s ease, opacity 2s ease, top 1s ease;
}
/*even items will be 100px lower than their siblings*/
.item:nth-child(even) {
 margin-top: 100px;
}
[/td][/tr]