Звёздное небо с облаками на CSS3

Разместил: Apocalypse
29 апреля 2016

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

<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>

2#: В самый низ вашего CSS поместите:

@keyframes move-twink-back {
from {
background-position: 0 0;
}

to {
background-position: -10000px 5000px;
}
}

@-webkit-keyframes move-twink-back {
from {
background-position: 0 0;
}

to {
background-position: -10000px 5000px;
}
}

@-moz-keyframes move-twink-back {
from {
background-position: 0 0;
}

to {
background-position: -10000px 5000px;
}
}

@-ms-keyframes move-twink-back {
from {
background-position: 0 0;
}

to {
background-position: -10000px 5000px;
}
}

@keyframes move-clouds-back {
from {
background-position: 0 0;
}

to {
background-position: 10000px 0;
}
}

@-webkit-keyframes move-clouds-back {
from {
background-position: 0 0;
}

to {
background-position: 10000px 0;
}
}

@-moz-keyframes move-clouds-back {
from {
background-position: 0 0;
}

to {
background-position: 10000px 0;
}
}

@-ms-keyframes move-clouds-back {
from {
background-position: 0;
}

to {
background-position: 10000px 0;
}
}

.stars,.twinkling,.clouds {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}

.stars {
background: #000 url(/img/stars.png) repeat top center;
z-index: 0;
}

.twinkling {
background: transparent url(/img/twinkling.png) repeat top center;
z-index: 1;
-moz-animation: move-twink-back 200s linear infinite;
-ms-animation: move-twink-back 200s linear infinite;
-o-animation: move-twink-back 200s linear infinite;
-webkit-animation: move-twink-back 200s linear infinite;
animation: move-twink-back 200s linear infinite;
}

.clouds {
background: transparent url(/img/clouds.png) repeat top center;
z-index: 3;
-moz-animation: move-clouds-back 200s linear infinite;
-ms-animation: move-clouds-back 200s linear infinite;
-o-animation: move-clouds-back 200s linear infinite;
-webkit-animation: move-clouds-back 200s linear infinite;
animation: move-clouds-back 200s linear infinite;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

@keyframes move-twink-back {

from {

background-position: 0 0;

}

to {

background-position: -10000px 5000px;

}

@-webkit-keyframes move-twink-back {

from {

background-position: 0 0;

}

to {

background-position: -10000px 5000px;

}

@-moz-keyframes move-twink-back {

from {

background-position: 0 0;

}

to {

background-position: -10000px 5000px;

}

@-ms-keyframes move-twink-back {

from {

background-position: 0 0;

}

to {

background-position: -10000px 5000px;

}

@keyframes move-clouds-back {

from {

background-position: 0 0;

}

to {

background-position: 10000px 0;

}

@-webkit-keyframes move-clouds-back {

from {

background-position: 0 0;

}

to {

background-position: 10000px 0;

}

@-moz-keyframes move-clouds-back {

from {

background-position: 0 0;

}

to {

background-position: 10000px 0;

}

@-ms-keyframes move-clouds-back {

from {

background-position: 0;

}

to {

background-position: 10000px 0;

}

.stars,.twinkling,.clouds {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 100%;

display: block;

}

.stars {

background: #000 url(/img/stars.png) repeat top center;

z-index: 0;

}

.twinkling {

background: transparent url(/img/twinkling.png) repeat top center;

z-index: 1;

-moz-animation: move-twink-back 200s linear infinite;

-ms-animation: move-twink-back 200s linear infinite;

-o-animation: move-twink-back 200s linear infinite;

-webkit-animation: move-twink-back 200s linear infinite;

animation: move-twink-back 200s linear infinite;

}

.clouds {

background: transparent url(/img/clouds.png) repeat top center;

z-index: 3;

-moz-animation: move-clouds-back 200s linear infinite;

-ms-animation: move-clouds-back 200s linear infinite;

-o-animation: move-clouds-back 200s linear infinite;

-webkit-animation: move-clouds-back 200s linear infinite;

animation: move-clouds-back 200s linear infinite;

}

Три картинки из прикреплённого архива залейте в папку img

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

не в сети 4 дня

Apocalypse

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

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

Метки: CSS3 Звёзды Небо Ночь Облака Эффект

Apocalypse

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

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

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

Старые

Новые

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

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

topka

Есть скрипт ( денег или баллов ? )
где можно потратить эти баллы или передать и заработать ?

Что-то такое видел на одном сайте ( сталкер сайт на юкозе было)

2024-03-06 21:31:46

Всевидящее око

Новый пост от installusd1 в теме «PPI Pay-Per-Install Best Advertising Network»

2024-03-25 09:45:25

Всевидящее око

Новый комментарий от пользователя паоа: «пкаор» в материале Ajax отправка комментариев в Wordpess без плагинов от Apocalypse

2024-03-27 20:08:09

Apocalypse

Сайт был восстановлен спустя несколько месяцев бездействия

2024-06-27 16:12:56

fapalnaapo

а Шо случилось за что блокировали

2024-06-30 20:46:10

Apocalypse

@fapalnaapo, банально хостинг не был уплачен

2024-07-14 08:27:24

Apocalypse

Всем привет. У кого как жизнь?

2024-07-30 19:50:15

fapalnaapo

давольно таки не плохо, очень приятно, мне очень нравится между прочем

2024-08-13 10:09:49

Apocalypse

Всем доброго дня

2024-11-07 12:00:10

Al-Sher

Всем привет

2024-11-09 17:57:18

......

Для публикации сообщений в чате необходимо авторизоваться