可3D展开收缩的多图文列表布局-聚优部落

可3D展开收缩的多图文列表布局

添加时间：2021-03-16 04:52:33

站长推荐丨赞助论坛，可获取海量资源终身免费下载权限奥!

赞助一下

预览

当前位置：

前端特效

DIVCSS

一款可3D展开收缩的多图文列表布局特效，点击每个图文上面的向下的箭头，都可以展开更多的说明文字内容，还有一个按钮可以链接到图文消息的页面（链接可自由设置），当前激活的图文内容会有一个放大的突出显示效果，喜欢的童鞋请收下吧。

分类：图片代码 > 图片墙难易：初级

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，不难看出多个div容器的嵌套，相似的内容复制粘帖即可，代码如下：

<div class="cards">
  <div class="card">
    <img src="http://s4c.cymru/temp/wave1.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

    <div class="card">
    <img src="http://s4c.cymru/temp/wave2.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave3.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave2.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave3.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave1.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave3.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <img src="http://s4c.cymru/temp/wave1.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <img src="http://s4c.cymru/temp/wave2.jpg">
    <div class="card-title">
      <a href="#" class="toggle-info btn">
        <span class="left"></span>
        <span class="right"></span>
      </a>
      <h2>
          图片标题
          <small>图片的简单说明文字</small>
      </h2>
    </div>
    <div class="card-flap flap1">
      <div class="card-description">
        这是一个很有意思的过程，就好比把宇宙当成一本货物的目录，你翻着它，然后决定“我要经历这个，我要那种东西，我要跟那种人一起生活”，你就是那个跟宇宙下订单的人。其实就是这样简单。
      </div>
      <div class="card-flap flap2">
        <div class="card-actions">
          <a href="#" class="btn">更多内容</a>
        </div>
      </div>
    </div>
  </div>

</div>

页面的底部，需远程调用jQuery库和modernizr插件，并引入本地的JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

可3D展开收缩的多图文列表布局

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

页面的body部分，不难看出多个div容器的嵌套，相似的内容复制粘帖即可，代码如下：

页面的底部，需远程调用jQuery库和modernizr插件，并引入本地的JS文件，代码如下：

上一篇：div+css电商网站底部布局样式代码

下一篇：带鼠标悬停翻转的个人卡片简洁版

可3D展开收缩的多图文列表布局

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

页面的body部分，不难看出多个div容器的嵌套，相似的内容复制粘帖即可，代码如下：

页面的底部，需远程调用jQuery库和modernizr插件，并引入本地的JS文件，代码如下：

上一篇：div+css电商网站底部布局样式代码

下一篇：带鼠标悬停翻转的个人卡片简洁版

回帖

内容举报

举报类型：

说明：

附件下载

下载验证：

附件：

发帖找资源

回帖

会员登陆