Очень лёгкий код, только html и css, поэтому вставить его можно куда угодно, хоть в CMS, написанную на php, хоть в простую html страницу.
Количество и размер звёздочек можно увеличить по желанию,о чём есть комментарии в коде.
HTML
<div class="space">
<div class="stars1"></div>
<div class="stars2"></div>
<div class="stars3"></div>
<div class="stars4"></div>
<div class="stars5"></div>
<div class="stars6"></div>
<div class="stars7"></div>
<div class="stars8"></div>
<div class="stars9"></div>
<div class="stars10"></div>
</div>
.space {
width: 600px;
height: 300px;
/* Фон - картинка фрагмента звёздного неба
которая по умолчанию размножилась на весь блок */
background-image: url(images/120.jpg);
position: relative;
}
/*Делаем 10 звёздочек, часть из которых будет
мигать, а часть падать*/
.stars1,
.stars2,
.stars3,
.stars4,
.stars5,
.stars6,
.stars7,
.stars8,
.stars9,
.stars10 {
position: absolute;
border-radius: 50%/50%;
background-image: -webkit-radial-gradient(white, black);
width: 3px; /*размер звёздочек, можно увеличить*/
height: 3px;
}
/*Позиционируем все звёздочки на разном расстоянии
от краёв блока и задаём им анимацию меняющую их положение
или прозрачность*/
.stars1 {
top: 8%;
left: 3%;
animation: stars1 4s 3s linear infinite;
}
.stars2 {
top: 3%;
left: 10%;
animation: stars2 2s linear infinite;
}
.stars3 {
top: 15%;
left: 25%;
animation: stars3 5s 1s linear infinite;
}
.stars4 {
top: 12%;
left: 35%;
animation: stars4 6s 2s linear infinite;
}
.stars5 {
top: 23%;
left: 47%;
animation: stars5 2.5s 1s linear infinite;
}
.stars6 {
top: 11%;
left: 60%;
animation: stars6 7s linear infinite;
}
.stars7 {
top: 20%;
left: 70%;
animation: stars7 2s 1s linear infinite;
}
.stars8 {
top: 12%;
left: 80%;
animation: stars8 4s linear infinite;
}
.stars9 {
top: 30%;
left: 90%;
animation: stars9 3s 2s linear infinite;
}
.stars10 {
top: 7%;
left: 98%;
animation: stars10 6s linear infinite;
}
/*Четыре звёздочки делаем мигающими, задав им переход
от полной прозрачности к полной непрозрачности*/
@keyframes stars2 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars5 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars7 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
@keyframes stars9 {
0% {
opacity: 1;
}
100%{
opacity: 0;
}
}
/*Остальные делаем падающими задав им перемещение
и изменение размера*/
@keyframes stars1 {
0% {
width: 1px; /*Размер звёздочки в начале падения*/
}
7% {
width: 6px; /*Размер в процессе падения*/
opacity: 1;
transform: translate(150px, 150px);
}
8% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars3 {
0% {
width: 3px;
}
12% {
width: 10px;
opacity: 1;
transform: translate(-200px, 200px);
}
13% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars4 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(200px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars6 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-400px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars8 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-300px, 300px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes stars10 {
0% {
width: 3px;
}
10% {
width: 10px;
opacity: 1;
transform: translate(-600px, 200px);
}
11% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Желаю творческих успехов.
В раздел >>>
