html - 2 div并排使用css - 一步

Question

如何并排放置两个div其中一个正在不断地上下 move 并包含 img

我试过这个:

 <div>
 <div style="margin:30px;width:100px;height:250px;position:relative;float:left;background-color:red;">A</div>
 <div style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>

我可以让 B div 上下 move 吗？

Answer 1

由于您使用 CSS 而不是 Jquery/Javascript 标记了这个问题，所以我正在使用 CSS 关键帧动画。是not supported in IE<=9 .

div.boxB {
    -webkit-animation: move 5s linear infinite;
    -moz-animation: move 5s linear infinite;
    animation: move 5s linear infinite;
}

@-webkit-keyframes move {
    0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}

@-moz-keyframes move {
    0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}
@keyframes move {
     0% {
        margin-top: 30px;
    }
    25% {
        margin-top: 100px;
    }
    50% {
        margin-top: 180px;
    }
    75% {
        margin-top: 100px;
    }
    100% {
        margin-top: 30px;
    }
}

<div>
    <div style="margin:30px;width:100px;height:200px;position:relative;float:left;background-color:red;">A</div>
    <div class="boxB" style="margin:30px;width:100px;height:50px;position:relative;float:left;background-color:blue;">B</div>
</div>