Любовный напиток No. 9. Пример №3. Zurb-эксперименты с тенями на CSS

Вам приходилось быть на месте человека, когда вы любите кого-то, а вас нет? Хотя, мы не можем заставить кого-то полюбить, но в качестве подарка можем предложить любовный напиток с пузырьками на CSS.

Для такой смеси мы сначала использовали простое изображение колбы, а затем и пузырьки, выполненные с помощью HTML разметки и CSS стилей (в т.ч. и анимация).

Живой пример

HTML разметка пузырьков

Пузырьки сделали, теперь нужно, чтобы они вели себя, как пузырьки. Мы могли бы использовать для анимации Javascript, но это не весело. Поэтому, будем использовать только CSS!

Есть несколько вещей, которые мы должны учитывать, когда будем делать анимацию. Первое, очевидно, вертикальное позиционирование, но еще и размер пузырьков, во время их путешествия вверх. И наконец, нужна анимация разрыва. Посмотрите bubbleFloat и redPulse, чтобы понять, как это сделано.

Анимация

Вот и все.

Сделаем немного пузырьков

Надеемся, вам понравилось.)))


Один комментарий на “Любовный напиток No. 9. Пример №3. Zurb-эксперименты с тенями на CSS

Оставить комментарий