CSS/HTML提升条效果不是'；t工作不正常_Html_Css

CSS/HTML提升条效果不是'；t工作不正常

html css

CSS/HTML提升条效果不是'；t工作不正常,html,css,Html,Css,我想要这个，但不是倒置，我想要从下到上的方向我尝试了以下代码，但它不起作用，你能帮我完成以下代码吗： <style> /** Pure CSS wave effect **/ div.wave{ position: absolute ; width: 100%; } div.wave > span{ float:left; width: 10%; height: 200px; -webkit-animation: ani

我想要这个，但不是倒置，我想要从下到上的方向

我尝试了以下代码，但它不起作用，你能帮我完成以下代码吗：

<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>


/**纯CSS波效应**/
纵波{
位置：绝对位置
;
宽度：100%；
}
纵波>跨距{
浮动：左；
宽度：10%；
高度：200px；
-webkit动画：动画1.5s缓进缓出交替无限；
}
div.wave>span:n个子项（1）{
背景色：#B58900；
}
div.wave>span:n个子项（2）{
背景色：#F7877C；
-webkit动画延迟：.2s；
}
div.wave>span:n个子项（3）{
背景色：#0E7DA8；
-webkit动画延迟：.4s；
}
div.wave>span:n个子项（4）{
背景色：#C4EADF；
-webkit动画延迟：.6s；
}
div.wave>span:n个子项（5）{
背景色：#B4A4CB；
-webkit动画延迟：.8s；
}
div.wave>span:n个子项（6）{
背景色：#FBD92F；
-webkit动画延迟：1s；
}
div.wave>span:n个子项（7）{
背景色：#268BD2；
-webkit动画延迟：1.2s；
}
div.wave>span:n个子项（8）{
背景色：#859900；
-webkit动画延迟：1.4s；
}
div.wave>span:n个子项（9）{
背景色：#BBFFFF；
-webkit动画延迟：1.6s；
}
div.wave>span:n个子项（10）{
背景色：#FFE8E8；
-webkit动画延迟：1.8s；
}
@-webkit关键帧动画{
至{高度：100px；}
}

提前感谢

在我看来，您还需要添加一个与新高度相同的边距顶部：

@keyframes animate{

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

}

这是经过修改的、有效的波浪：

在我看来，您只需添加一个与新高度相同的边距顶部：

@keyframes animate{

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

}

这是经过修改的、有效的wave:

你说它不起作用是什么意思？（你测试的是哪个浏览器？仅限于WebKit。）我正在使用chrome，它并没有按照我想要的那样从下到上而不是从上到下移动。我发布了一个有效的修改。将来，请让我们知道你尝试过什么。那么像这样吗？你说它不起作用是什么意思？（你测试的是哪个浏览器？仅限于WebKit。）我正在使用chrome，它并没有按照我想要的那样从下到上而不是从上到下移动。我发布了一个有效的修改。将来，请让我们知道你尝试过什么。那么像这样吗？