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

私の見方では、新しい高さと同じマージントップも追加する必要があります。

@keyframes animate{

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

}

変更された機能するウェーブは次のとおりです: http://dabblet.com/gist/6001816

于 2013-07-15T17:35:28.293 に答える