Всплывающие пузырьки на CSS

На самом деле — это не совсем пузырьки, а просто точки, движущиеся вверх. Тем не менее, эффект довольно интересный и без использования JavaScript. Кроме того, простой корректировкой из пузырьков можно сделать звездочки или снежинки.

HTML:
CSS:

Класс .bubl отвечает за сам блок и его размеры, а .bublcontent за информацию на нем.

Пример:
Текст на фоне

Можно так же использовать альтернативный вариант всплывающих пузырьков на JS, который имеет больший функционал

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • DarkNood:

    А как растянуть анимацию на всю страницу, а то не получается? (Вся страница 426000px)

    Ответить
    • Alexander:

      Имеется ввиду по высоте на всю страницу?
      Тут лучше использовать на JS что-то, или переписывать CSS для нужной высоты (сейчас 2500px) и увеличивать кол-во пузырьков.

      Плюс на JS можно поставить зависимость кол-ва пузырьков от высоты страницы.

      Ответить
  • Роман:

    Скажите пожалуйста, а как такое воплотить, смотрите есть файлы html, они загружаются в контролер вайфай, когда запускаешь контролер вайфай и открываешь браузер и устанавливаешь в браузере IP адрес УРЛ, открываются эти файлы html и получается веб интерфейс представленный на страницах html. Как реализовать ваш урок в данном случаи, не получается что то у меня. Как прописать адрес для стиля и адрес для картинку.

    Ответить
    • Alexander:

      Не совсем понял что вы делаете... Если прописывать полные пути, например: _http://site.ru/style.css и соотв. _http://site.ru/image.jpg то не работает?
      А если нужно, чтобы вся конструкция была в 1 файле, без подключений ссылок на изображение и стиль, то стиль без проблем вставляется в хтмл файл, а фоновую картинку можно вставить в стиль закодировав в base64

      Ответить