CSS3卡牌旋转滑动效果

css3-card

这个 css3 类似于幻灯片旋转的效果,是一个比较有意思并且比较受欢迎的特效。之前没有去研究过,无意在博客上看到 Wenzi 写了这个东西,来看看他的代码是怎么实现的。

CSS 定位还是比较简单的,使用绝对定位加上 z-index 就能够实现上面的效果。

要想改变幻灯片的位置,有三点:位置、大小、层次。

看起来像是 div 进行了移动,实际上并没有,只是切换了每个元素的 class,于是幻灯片就发生了翻转。

其实原理就是这样的: 不进行DOM的增删,为每个位置上的div都写上特定的样式,每个div都进行绝对定位,然后进行样式的轮播。 每次切换都有个0.6s过渡过程:

-webkit-transition: all 0.6s;
transition: all 0.6s;

比如从左往右的class分别为:item_0, item_1, item_cur, item_3, item_4,每个class都是当前所在div的定位,向左滑动时,右边的div会切换到中间,这样class从左往右就变成了item_1, item_cur, item_3, item_4,item_0

HTML代码:

<div class="demo">
    <div class="item item_0">1</div>
    <div class="item item_1">2</div>
    <div class="item item_cur">3</div>
    <div class="item item_3">4</div>
    <div class="item item_4">5</div>
</div>
<div class="demo_btn">
    <a href="javascript:;" class="left" title="向左移动">&lt;&lt;</a>
    <a href="javascript:;" class="right" title="向右移动">&gt;&gt;</a>
    <p>(PC下可点击按钮切换,移动端可左右滑动切换)</p>
</div>

CSS:

.demo {
        position: relative;
        height: 320px;
        /*margin-top: 1rem;*/
        width: 100%
    }

    .demo .item {
        position: absolute;
        left: 50%;
        bottom: 0;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        -webkit-transition: all 0.6s;
        transition: all 0.6s;
        width: 222px;
        height: 300px;
        /*border: 1px solid #ccc;*/
        text-align: center;
        line-height: 300px;
        z-index: 1;
        font-size: 74px;
        color: #fff;
    }

    .demo .item_cur {
        z-index: 3
    }

    .demo .item_0 {
        -webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1);
        transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1)
    }

    .demo .item_1 {
        -webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
        transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1);
        z-index: 2
    }

    .demo .item_3 {
        -webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
        transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1);
        z-index: 2
    }

    .demo .item_4 {
        -webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1);
        transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1)
    }

    .demo_btn{
        text-align: center;
    }

JavaScript代码:

(function(){
    var getRandomColor = function(){
        return '#'+Math.floor(Math.random()*16777215).toString(16);
    }

    var egg_change = function(type){
        var $demo = $('.demo'),
            index = parseInt( $demo.attr('index_cur')||2 ),
            $item = $('.demo .item'),
            len = $item.length;

        if( type=='left' ){
            index = (index+1)%len;
        }else{
            index = (index-1+len)%len;
        }
        $demo.attr('index_cur', index);

        $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
       
        $item.eq( (index-2+len)%len ).addClass('item_0');
        $item.eq( (index-1+len)%len ).addClass('item_1');
        $item.eq(index).addClass('item_cur');
        $item.eq( (index+1)%len ).addClass('item_3');
        $item.eq( (index+2)%len ).addClass('item_4');
    }

    $('.item').each(function(){
        $(this).css('background-color', getRandomColor());
    })

    $('.demo').on('swipeLeft', function(){
        egg_change( 'left' );
    }).on('swipeRight', function(){
        egg_change( 'right' );
    });

    $('.demo_btn').on('click', '.left', function(){
        egg_change( 'left' );
    }).on('click', '.right', function(){
        egg_change( 'right' );
    })
})();

演示

参考:使用CSS3实现卡牌的旋转切换效果

虽然用 CSS3 效果实现起来很赞,但是却不兼容 IE9 以下的,下一篇我将试着改为支持 IE 全系列,考虑用 jQuery 动画来实现。

原创文章:CSS3卡牌旋转滑动效果 ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/css3-card.html)
评论已关闭。