css3 slideup box

本实例主要是对css3的transition属性的应用，同时应用了rotate旋转和nth-child子元素选择器。原理是先设置容器为一定的高度并overflow为hidden，然后标题的高度为整个高度且opacity为1，而内容为一定的rotate角度且opacity为0。当鼠标滑过的时候标题margin为负的容器高度，opacity为0，而内容的rotate为0，opacity为1。当然最关键的是我们的transition的应用，把这些变化动画化。而内容的背景图片就充分应用了nth-child子元素选择器

demodownload

css主要代码为：

.slide-up-boxes a {
    display: block; 
    height: 130px; 
    margin: 0 0 20px 0; 
    background: rgba(215, 215, 215, 0.5); 
    border: 1px solid #ccc; 
    height: 65px; 
    overflow: hidden; 
}

.slide-up-boxes h5 { 
    color: #333; 
    text-align: center;
    height: 65px; 
    font: italic 18px/65px Georgia, Serif;    /* Vertically center text by making line height equal to height */
     opacity: 1;
     -webkit-transition: all 0.2s linear; 
     -moz-transition: all 0.2s linear; 
     -o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 { 
    margin-top: -65px; 
    opacity: 0; 
}

.slide-up-boxes div { 
    position: relative; 
    color: white; 
    font: 12px/15px Georgia, Serif;
    height: 45px; 
    padding: 10px; 
    opacity: 0; 
    -webkit-transform: rotate(6deg); 
    -webkit-transition: all 0.4s linear; 
    -moz-transform: rotate(6deg); 
    -moz-transition: all 0.4s linear; 
    -o-transform: rotate(6deg); 
    -o-transition: all 0.4s linear; 
}
.slide-up-boxes a:hover div { 
    opacity: 1; 
    -webkit-transform: rotate(0); 
    -moz-transform: rotate(0); 
    -o-transform: rotate(0); 
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(images/wufoo.png) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(images/diw.png) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(images/qod.png) 14px 16px no-repeat; padding-left: 133px; }

demodownload

查看更多：http://css-tricks.com/video-screencasts/93-css3-slideup-boxes/