awards——toolofna

效果

思路

只要计算好transition的动画延迟时间，就能达到多个元素过渡动画的自然顺滑。本页面主要是数字滚轮比较有特色

可以参考我的另一篇博客——数字滚轮 demo
http://blog.youkuaiyun.com/iamcgt/article/details/72831874

源码

html

 <div class="frame">
            <div class="box1 box">
                <span>6</span>
            </div>
            <div class="box2 box">
                <span>8</span>
            </div>
            <div class="box3 box">
                <span>9</span>
            </div>
        </div>

css

#awards .awards-header .frame{
    overflow: hidden;
    width: 600px;
    height: 300px;
    position: absolute;
    left: 40px;
    top: 94px;
}
#awards .awards-header .box1,.box2,.box3{
    position: absolute;
    top:0;
    width: 200px;
    height: 100%;
    line-height: 300px;
    text-align: center;
    font-size: 300px;
    font-weight: bold;
    color: #e74c4c;
}
#awards .awards-header .box1{
    left: 0;
    opacity: 0;
    transition: transform 1s .6s,opacity .5s .6s;

}
#awards .awards-header .box2{
    left: 200px;
    opacity: 0;
    transition: transform 1s .3s,opacity .5s .3s;
}
#awards .awards-header .box3{
    left: 400px;
    opacity: 0;
    transition: transform 1s,opacity .5s .1s;
}
#awards .awards-header .box span{
    display: block;
    width:100%;
    height: 100%;
}

JavaScript

    /**
     * awards
     */
    for (var i = 0; i < 10; i++) {
        $(".box").prepend(function () {
            var text = $(this).children().html();
            return "<span>" + text + "</span>";
        }).css("top", -300 * (i + 1) + "px").css({"transform": "translateY(3000px)", "opacity": "1"});
    }

toolofna

http://toolofna.com/#!/awards