干货CSS3 卡牌旋转滑动效果

Posted 2021-04-09 UI设计自学平台

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

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

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

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

其实原理就是这样的： 不进行DOM的增删，为每个位置上的div都写上特定的样式，每个div都进行绝对定位，然后进行样式的轮播。 每次切换都有个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' );
    })
})();

觉得本文对你有帮助？请分享给更多人

关注「网页设计自学平台」快速提升技能

福利！免费领取腾讯高级讲师网页设计教程

来源：前端博客

每天学一点·小白快速进阶大神

设计｜DW教程｜AE教程｜前端资讯

微信ID：WEB_wysj

▲长按二维码关注