手机体验细节小动画

浏览数：29 / 时间：2015年06月11日

1.展开收起

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 展开收起 </title>

    <style>
        .m-list { background-color: #fff; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; overflow: hidden; }
        .m-list .hd { position: relative; z-index: 10; height: 40px; line-height: 40px; background-color: #fff; cursor: pointer; }
        .m-list .tit { font-size: 14px; margin: 0; }
        .m-list .more { -webkit-transform: rotate(0deg); transform: rotate(0deg); float: right; width: 40px; height: 40px; text-align: center; color: #ccc; font-size: 12px; }
        .m-list .bd { height: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); border-top: 1px #e0e0e0 dashed; overflow: hidden; }
        .m-list .hd.active + .bd { height: auto; transform: translateY(0); padding: 10px 0; }
        .m-list .hd.active .more { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
        .m-list .more, .m-list .bd { -webkit-transition: all 1s; transition: all 1s; }
    </style>
</head>
<body>

<div class="m-list J_List">
    <div class="hd active">
        <span class="more">▲</span>
        <h2 class="tit">点我展开/收起</h2>
    </div>
    <div class="bd">
        世界那么大，我想去看看~<br/>
        世界那么大，我想去看看~<br/>
        世界那么大，我想去看看~<br/>
        世界那么大，我想去看看~<br/>
    </div>
</div>

世界不是你想看，想看就能看 - -
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>
    $(‘.J_List .hd‘).on(‘click‘, function(){
        $(this).toggleClass(‘active‘);
    });
</script>
</body>
</html>

View Code

2.TAB导航动画切换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> TAB导航动画切换 </title>
    <style>
        .m-tab2 {
            position: relative;
            overflow: hidden;
            background-color: #f0f6f8
        }

        .m-tab2 .item {
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-top: 1px #e0e0e0 solid;
            border-bottom: 1px #e0e0e0 solid;
            font-size: 14px;
            color: #333;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        .m-tab2 .item:not(:first-child) {
            border-left: 1px #e0e0e0 solid
        }

        .m-tab2 .active {
            background-color: #fff;
            color: #fe6601
        }

        .m-tab2 .scrollbar {
            position: absolute;
            z-index: 10;
            left: 0;
            bottom: 0;
            height: 2px;
            background-color: #fe6601;
            -webkit-transition: transform 300ms ease-in-out;
            transition: transform 300ms ease-in-out
        }

        .m-tab2 .item:nth-of-type(1).active ~ .scrollbar {
            transform: translateX(0);
            -webkit-transform: translateX(0)
        }

        .m-tab2 .item:nth-of-type(2).active ~ .scrollbar {
            transform: translateX(100%);
            -webkit-transform: translateX(100%)
        }

        .m-tab2 .item:nth-of-type(3).active ~ .scrollbar {
            transform: translateX(200%);
            -webkit-transform: translateX(200%)
        }

        .m-tab2 .item:nth-of-type(4).active ~ .scrollbar {
            transform: translateX(300%);
            -webkit-transform: translateX(300%)
        }

        .m-tab2 .item:nth-of-type(5).active ~ .scrollbar {
            transform: translateX(400%);
            -webkit-transform: translateX(400%)
        }

        .m-tab2 .item:nth-of-type(6).active ~ .scrollbar {
            transform: translateX(500%);
            -webkit-transform: translateX(500%)
        }

        .wb50 { width: 50%; }
    </style>
</head>
<body>

<div class="m-tab2 J_Tab">
    <a class="item wb50 active" href="javascript:;">栏目1</a>
    <a class="item wb50" href="javascript:;">栏目2</a>
    <i class="scrollbar wb50"></i>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script>
    $(‘.J_Tab .item‘).on(‘click‘, function(){
        $(this).addClass(‘active‘).siblings(‘.item‘).removeClass(‘active‘);
    });
</script>

</body>
</html>

View Code

3.列表动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> 列表动画 </title>
    <style>

        .list { height: 100px; line-height: 100px; text-align: center; margin-bottom: 10px; background-color: #ccc; border-top: 1px #e0e0e0 solid; border-bottom: 1px #e0e0e0 solid; }



        .anim-slide:nth-of-type(1) {
            -webkit-animation: slide .5s ease 0s backwards;
            animation: slide .5s ease 0s backwards
        }

        .anim-slide:nth-of-type(2) {
            -webkit-animation: slide .5s ease .1s backwards;
            animation: slide .5s ease .1s backwards
        }

        .anim-slide:nth-of-type(3) {
            -webkit-animation: slide .5s ease .2s backwards;
            animation: slide .5s ease .2s backwards
        }

        .anim-slide:nth-of-type(4) {
            -webkit-animation: slide .5s ease .2s backwards;
            animation: slide .5s ease .2s backwards
        }

        .anim-slide:nth-of-type(5) {
            -webkit-animation: slide .5s ease .2s backwards;
            animation: slide .5s ease .2s backwards
        }

        .anim-slide:nth-of-type(6) {
            -webkit-animation: slide .5s ease .2s backwards;
            animation: slide .5s ease .2s backwards
        }

        @-webkit-keyframes slide {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,32px,0);
                transform: translate3d(0,32px,0)
            }

            100% {
                opacity: 1;
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0)
            }
        }

        @keyframes slide {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0,32px,0);
                transform: translate3d(0,32px,0)
            }

            100% {
                opacity: 1;
                -webkit-transform: translate3d(0,0,0);
                transform: translate3d(0,0,0)
            }
        }

    </style>
</head>
<body>

<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>
<div class="list anim-slide">列表</div>

</body>
</html>