Волк, полнолуние и вращающиеся звёзды на CSS3

Разместил: Apocalypse
Опубликовано: 3 мая 2016

Скачать Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Отличный пример того, как можно оживить, вроде бы, обычную картинку, силами CSS3 Установка: 1#: В самый верх вашего CSS вставьте:

@import url('/css/moon.css') all; body { background-color: #002142; }

1 2 3 4

@import url('/css/moon.css') all; body { background-color: #002142; }

  2#: HTML код вставьте в нужное место на странице:

<div class="frame"> <div class="constellation stars-a"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="constellation stars-b"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="moon"></div> <div class="wolf"></div> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

<div class="frame"> <div class="constellation stars-a"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="constellation stars-b"> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> <div class="star"></div> </div> <div class="moon"></div> <div class="wolf"></div> </div>

Осталось лишь залить CSS файл из прикреплённого архива в папку css и две картинки в папку img

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3MoonВолкВращающаясяЗвёздыЛунаНочьПолнолуниеЭффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Домик на фоне луны и звёзд на CSS3 и jQuery
• Предыдущая публикация Звёзды - частицы, летящие вверх с Parallax эффектом на CSS3

Вам может также понравиться...

• Радужный дождь на HTML5 Canvas

  Разместил: Apocalypse 14 июня 2016

  - Apocalypse 14 июня 2016

• Жёлтая кипящая жидкость реагирующая на курсор с использованием HTML5 Canvas

  Разместил: Apocalypse 7 января 2019

  - Apocalypse 7 января 2019

• Великолепный снег с Parallax эффектом глубины и пространства на чистом CSS

  Разместил: Apocalypse 4 декабря 2021

  - Apocalypse 4 декабря 2021 Last modified 10 декабря 2021

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

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