CSS & Bootstrap Custom Burn Transition

Эй, ребята, я пытаюсь создать эффект быстрого ожога. Я использую Backbonejs, Backbone Layout manager и загрузчик Twitter. У меня есть div-обертка, которая содержит несколько полей tex, imgs, label, ect... div-обертка управляется представлением макета магистрали. В оболочке div находится кнопка, позволяющая восстановить для всех полей их значения по умолчанию. Эффект, который я имел в виду, похож на то, чтобы держать лист бумаги вертикально в воздухе и зажечь его в нижней части. В настоящее время, когда нажимают кнопку восстановления, я просто заново отображаю вид со значениями по умолчанию. поэтому вместо того, чтобы нажимать кнопку восстановления, я хотел бы, чтобы div сгорел, и после того, как весь div сожжен, div повторно отображает себя с новыми значениями.

<div class="row">
                <div class="col-xs-8 col-md-8">
                    <img src="img/defaultContact.png" class="img-thumbnail" style="max-height: 150px;">
                </div>
                <div class="col-xs-4 col-md-4">
                    <button type="button" class="btn btn-default btn-md" id="contact-detail-save-button">
                        <span class="glyphicon glyphicon-save"></span> Save
                    </button>
                    <button type="button" class="btn btn-default btn-md" id="contact-detail-restore-button">
                        <span class="glyphicon glyphicon-fire"></span> Restore
                    </button>
                </div>
            </div>
            <div class="input-group">
                <span class="input-group-addon">First Name</span>
                <input type="text" class="form-control" placeholder="Contacts First Name" value="{{firstname}}" id="details-firstname">
            </div>
            <div class="input-group">
                <span class="input-group-addon">Last Name</span>
                <input type="text" class="form-control" placeholder="Contacts Last Name" value="{{lastname}}" id="details-lastname">
            </div>
            ...</div>

У меня пока нет кода. Я новичок в разработке на стороне клиента и не знаю, с чего начать.

Возможный способ сделать это - создать изображение огня и масштабировать его по экрану. Есть ли способ иметь масштабируемые изображения?

0 ответов

Другие вопросы по тегам