html - CSS Position - 如何制作动画框？

Question

我有“绿色”DIV。此 DIV 具有带动画(scaleX、scaleY)的“黄色”DIV。我想制作粉红色和蓝色的盒子(带有绿色 DIV)并像这样制作动画:http://i.imgur.com/3eGCa4D.jpg

但我不能使用这个位置，这样一切都不会崩溃 :-/

这是我的代码:jsfiddle.net/KxM68/24/

Answer 1

只需添加两个框。您可以设置 position:absolute 或使用边距

这是一种带边距的解决方案 http://jsfiddle.net/bxrMA/

CSS:

.pinkbox {
    background-color: pink;
    float:left;
    margin-top: -30px;
    margin-left: -5px;
    height: 60px;
    width: 60px;
}
.bluebox {
    background-color: blue;
    float:left;
    margin-top: -30px;
    margin-left: 140px;
    height: 60px;
    width: 60px;
}

以及添加了 div 的 HTML

<div style="width: 300px; height: 120px; background-color: green; margin: 10px 0 0 10px; padding: 80px 0 0 30px;">
    <div class="element-animation">box</div>
    <div class="pinkbox"></div>
    <div class="bluebox"></div>
</div>