问CSS/HTML提杆效果不能正常工作
EN

Stack Overflow用户

提问于 2013-07-16 01:31:03

回答 1查看 213关注 0票数 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>

提前感谢

css

html

回答 1

Stack Overflow用户

发布于 2013-07-16 01:35:28

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

@keyframes animate{

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

}

下面是修改后的、功能正常的wave：http://dabblet.com/gist/6001816

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17660235

复制

相似问题

问CSS/HTML提杆效果不能正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML提杆效果不能正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS/HTML提杆效果不能正常工作
EN