当前位置：首页 > 网页特效 > 其他

炫酷网站带缩略图的文章卡片UI界面设计

分类：其他日期：2024-05-14 点击(1) 评论(0)

炫酷网站带缩略图的文章卡片UI界面设计

简介

#####  HTML结构
该文章卡片的HTML结构如下：

```html
<div class='column'>
  <div class='post-module'>
    
    <div class='thumbnail'>
      <img src='img/demo.jpg'>
    </div>
    <div class='post-content'>
      <div class='category'>文章类别</div>
      <h1 class='title'>文章标题</h1>
      <h2 class='sub_title'>文章子标题</h2>
      <p class='description'>文章简介......</p>
      <div class='post-meta'>
        <span class='timestamp'>
          <i class='fa fa-clock-o'></i>
          6 分钟前
        </span>
        <span class='comments'>
          <i class='fa fa-comments'></i>
          <a href='#'>39 回复</a>
        </span>
      </div>
    </div>
  </div>
</div>  
```             
#####  CSS样式
在鼠标滑过卡片的时候，卡片容器的阴影会发生动画效果，阴影被放大，就像卡片要脱离出屏幕一样。

```html
.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。

```html
.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代码来切换它的可见性。

```html
.post-module .post-content .description {
  display: none;
  color: #666666;
  font-size: 14px;
  line-height: 1.8em;
}  
```               
#####  JavaScript
为了切换文章简介部分的可见性和高度，这里使用了jQuery的animate()方法。在鼠标滑过卡片的时候，代码从.post-module包装集中查找.description元素，并在300毫秒的时间内切换它的高度和可见性。

```html
$(window).load(function () {
    $('.post-module').hover(function () {
        $(this).find('.description').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 300);
    });
});        
```

web299.com

炫酷网站带缩略图的文章卡片UI界面设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果