文章类别
文章标题
文章子标题
文章简介......
这是一款效果非常炫酷的网站列表页文章卡片UI界面设计效果。该文章卡片中包含了文章的缩略图、标题、文章简介等内容。文章的简介默认是不可见的，当鼠标滑过卡片时，缩略图被缩小，文章简介内容随之滑动显示出来。
使用方法
HTML结构
该文章卡片的HTML结构如下：
CSS样式
在鼠标滑过卡片的时候，卡片容器的阴影会发生动画效果，阴影被放大，就像卡片要脱离出屏幕一样。
.post-module {
position: relative;
z-index: 1;
display: block;
background: #ffffff;
min-width: 270px;
height: 470px;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.post-module:hover,
.hover {
-webkit-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 35px 0px rgba(0, 0, 0, 0.3);
}
然后在鼠标滑过卡片的时候，缩略图被放大1.1倍，透明度降低为0.6。
.post-module .thumbnail img {
display: block;
width: 120%;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
-ms-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.post-module:hover .thumbnail img,
.hover .thumbnail img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
transform: scale(1.1);
opacity: .6;
}
默认的文章简介部分p.description设置为display: none;，是不可见的。后面在鼠标滑过卡片的时候，会使用一些jQuery代码来切换它的可见性。
.post-module .post-content .description {
display: none;
color: #666666;
font-size: 14px;
line-height: 1.8em;
}
JavaScript
为了切换文章简介部分的可见性和高度，这里使用了jQuery的animate()方法。在鼠标滑过卡片的时候，代码从.post-module包装集中查找.description元素，并在300毫秒的时间内切换它的高度和可见性。
$(window).load(function () {
$('.post-module').hover(function () {
$(this).find('.description').stop().animate({
height: 'toggle',
opacity: 'toggle'
}, 300);
});
});
2861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
