首页 > 魅族官网导航栏一个一个显示的动画是怎么做的?

魅族官网导航栏一个一个显示的动画是怎么做的?


鼠标移到导航栏上面,下面的手机是一个一个显示的,这个动画咋做?是每隔一段时间用js给元素加class吗?


@-webkit-keyframes meizu-header-sub-show {
    from {
        height: 0
    }

    to {
        height: 127px
    }
}
@-webkit-keyframes meizu-header-sub-enter {
    from {
        -webkit-transform: translate(70px);
        transform: translate(70px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    to {
        -webkit-transform: translate(0);
        transform: translate(0);
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

主要是这两个动画


目测 css3的动画指针 淡入淡出加位移效果

【热门文章】
【热门文章】