css3 slideup box

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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/

Air Jordan VII 7.5 Ture Flight

如需转载,烦请注明出处:https://www.w3cplus.com/demo/393.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部