浙江 杭州

jQuery和CSS3炫酷堆叠卡片展开和收缩特效

系统分类: 亚博赠送彩金 - css3 - css3 渐变/圆角/阴影 2017-05-25

人气16072

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果超酷的jQueryCSS3堆叠卡片展开和收缩特效。该图片特效开始的时候卡片被堆叠在一起,当用户点击最上面的卡片的时候,堆叠图片以各种动画方式展开。展开后再点击任意卡片,它们又会收缩堆叠起来。

制作方法

HTML结构

该堆叠卡片共设计了4种效果,第一种效果的HTML结构采用无序列表结构,每一个

  • 元素中放置一张图片和一个用于图片描述的div.content元素。

    • Slide right

    • Card 1 Title

      Card description

    • Card 2 Title

      Card description

    • Card 3 Title

      Card description

    CSS样式

    第一种卡片效果的每张卡片的基本样式如下:

    ul.cards {
      width: 660px;
      margin: 0 auto 20px;
      height: 300px;
      list-style-type: none;
      position: relative;
      padding: 20px 0;
      cursor: pointer;
    }
    ul.cards li.title {
      margin: 0 0 20px;
    }
    ul.cards li.title h2 {
      font-weight: 700;
    }
    ul.cards li.card {
      background: #FFF;
      overflow: hidden;
      height: 200px;
      width: 200px;
      border-radius: 10px;
      position: absolute;
      left: 0px;
      box-shadow: 1px 2px 2px 0 #aaa;
      -webkit-transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
              transition: all 0.4s cubic-bezier(0.63, 0.15, 0.03, 1.12);
    }
    ul.cards li.card img {
      max-width: 100%;
      padding: 5px;
      height: auto;
    }
    ul.cards li.card div.content {
      padding: 5px 10px;
    }              
                  

    然后使用rotateZz-index属性来将图片堆叠在一起并分别旋转一定的角度。同时为后面两张卡片添加transition-delay,用于在卡片展开和收缩时有一定的延迟时间。

    ul.cards li.card.card-1 {
      z-index: 10;
      -webkit-transform: rotateZ(-2deg);
              transform: rotateZ(-2deg);
    }
    ul.cards li.card.card-2 {
      z-index: 9;
      -webkit-transform: rotateZ(-7deg);
              transform: rotateZ(-7deg);
      -webkit-transition-delay: 0.05s;
              transition-delay: 0.05s;
    }
    ul.cards li.card.card-3 {
      z-index: 8;
      -webkit-transform: rotateZ(5deg);
              transform: rotateZ(5deg);
      -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s;
    }                
                  

    在堆叠卡片被点击的时候,ul.card元素被添加了transition class,这个class用于执行卡片的展开动画。

    ul.cards.transition li.card {
      -webkit-transform: rotateZ(0deg);
              transform: rotateZ(0deg);
    }
    ul.cards.transition li.card.card-1 {
      left: 440px;
    }
    ul.cards.transition li.card.card-2 {
      left: 220px;
    }                
                  

    其它三种效果的实现原理基本相同,请参考下载文件。

    JAVASCRIPT

    特效中使用jQuery来在点击卡片时添加和移除相应的class。

    jQuery(document).ready(function ($) {
        $('ul.cards').on('click', function () {
            $(this).toggleClass('transition');
        });
        $('ul.card-stacks').on('click', function () {
            $(this).toggleClass('transition');
        });
        $('ul.cards-split').on('click', function () {
            $(this).toggleClass('transition');
        });
        $('ul.cards-split-delay').on('click', function () {
            $(this).toggleClass('transition');
        });
    });                
                  

    查看演示
    下载资源:3
    下载资源
    错误提交:

    格式:zip 大小:178.08KB

    ================关于优设记================
    “优设记ui3g.com“是国内最全jquery亚博赠送彩金--任意三数字加yabo.com直达官网下载 - 高质量网页素材的学习下载平台
    资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
    文章链接: http://www.ui3g.com/code/uicode-1841.html 非特殊说明,本文版权归原作者所有,转载请注明出处
    jQuery和CSS3炫酷堆叠卡片展开和收缩特效

    我当前G币余额:0 已下载次数:3

    注:购买该亚博赠送彩金--任意三数字加yabo.com直达官网的用户当日可免费下载 亚博赠送彩金--任意三数字加yabo.com直达官网作者可永久免费下载

    所需G币:20

    下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

    抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

    多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有3 评论)