Блог

Главная - Вопросы по программированию - Позиция CSS — как создавать анимированные поля?

Позиция CSS — как создавать анимированные поля?

#html #css

#HTML #css — файл #css

Вопрос:

У меня «зеленый» DIV. У этого DIV есть «желтый» DIV с анимацией (scaleX, scaleY). Я хочу создать розово-синее поле (с зеленым DIV) и анимировать вот так:http://i.imgur.com/3eGCa4D.jpg

Но я не могу использовать позицию, чтобы все не рассыпалось :-/

Это мой код: jsfiddle.net / KxM68/24/

Комментарии:

1. Это мой анимированный: jsfiddle.net/KxM68/24

Ответ №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;
}

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