带炫酷鼠标滑过效果的多列布局效果

当前位置:主页 > CSS3库 > UI界面设计 > 带炫酷鼠标滑过效果的多列布局效果
带炫酷鼠标滑过效果的多列布局效果
分享:

    插件介绍

    这是一款使用CSS3和少量js代码制作的带炫酷鼠标滑过效果的多列布局效果。该效果中将每篇文章制作为垂直多列布局,鼠标滑过每张缩略图时有炫酷的特效,点击缩略图时可将它全屏展开。

    浏览器兼容性

    浏览器兼容性
    时间:2016-07-18
    阅读:
麦子学院
简要教程

这是一款使用CSS3和少量js代码制作的带炫酷鼠标滑过效果的多列布局效果。该效果中将每篇文章制作为垂直多列布局,鼠标滑过每张缩略图时有炫酷的特效,点击缩略图时可将它全屏展开。

HTML

该多列布局效果的HTML结构如下:

<div class="cont__inner">
    <!-- el start -->
    <div class="el">
      <div class="el__overflow">
        <div class="el__inner">
          <div class="el__bg"></div>
          <div class="el__preview-cont">
            <h2 class="el__heading">Section 1</h2>
          </div>
          <div class="el__content">
            <div class="el__text">Whatever</div>
            <div class="el__close-btn"></div>
          </div>
        </div>
      </div>
      <div class="el__index">
        <div class="el__index-back">1</div>
        <div class="el__index-front">
          <div class="el__index-overlay" data-index="1">1</div>
        </div>
      </div>
    </div>
    <!-- el end -->
    ......
  </div>
</div>
                

下面的该多列布局效果的一些屏幕截图:

开始时的布局效果:

炫酷多列布局效果-1

鼠标滑过时的效果:

炫酷多列布局效果-2

缩略图点击后全屏展开的效果:

炫酷多列布局效果-3

网友评论