1

我想要这个，但不是颠倒，我想要从下到上的方向。http://dabblet.com/gist/4405823

我尝试了以下代码，但它没有用，你能帮我解决这个代码：

<style>
/** Pure CSS wave effect **/
div.wave{
    position: absolute
    ;
    width: 100%;
}
div.wave > span{
    float:left;
    width: 10%;
    height: 200px;
    -webkit-animation: animate 1.5s ease-in-out alternate infinite;
}
div.wave > span:nth-child(1){
    background-color: #B58900;  
}
div.wave > span:nth-child(2){
    background-color: #F7877C;
    -webkit-animation-delay: .2s;
}
div.wave > span:nth-child(3){
    background-color: #0E7DA8;
    -webkit-animation-delay: .4s;
}
div.wave > span:nth-child(4){
    background-color: #C4EADF;
    -webkit-animation-delay: .6s;
}
div.wave > span:nth-child(5){
    background-color: #B4A4CB;
    -webkit-animation-delay: .8s;
}
div.wave > span:nth-child(6){
    background-color: #FBD92F;
    -webkit-animation-delay: 1s;
}
div.wave > span:nth-child(7){
    background-color: #268BD2;
    -webkit-animation-delay: 1.2s;
}
div.wave > span:nth-child(8){
    background-color: #859900;
    -webkit-animation-delay: 1.4s;
}
div.wave > span:nth-child(9){
    background-color: #BBFFFF;
    -webkit-animation-delay: 1.6s;
}
div.wave > span:nth-child(10){
    background-color: #FFE8E8;
    -webkit-animation-delay: 1.8s;
}
@-webkit-keyframes animate{
    to { height: 100px; }
}

</style>

</head>
<body>
<div class='wave' style="position:absolute; bottom:0; width:100%;height:60px">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

提前致谢

4

1 回答 1

1

在我看来，您只需要添加一个与新高度相同的 margin-top ：

@keyframes animate{

    to { 
        height: 100px; 
        margin-top:100px; 
    }

}

这是修改后的功能波形：http ://dabblet.com/gist/6001816

于 2013-07-15T17:35:28.293 回答