CSS位置 - 如何制作动画盒？

Question

我有“绿色”DIV。这个DIV有带动画的“黄色”DIV（scaleX，scaleY）。我想要做的粉红色和蓝色的盒子（绿色DIV）和动画这样的：http://i.imgur.com/3eGCa4D.jpg

但我不能使用的位置让一切都不会崩溃： -/

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

Answer 1

只需添加两个框。您可以设置的位置是：绝对的或使用的利润率

这里的带空白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>