Очень лёгкий код, только 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>
[/html]
[html]
<style>
.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;
}
}
</style>
[/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>
CSS
.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; } }
Желаю творческих успехов!