init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
genesis committed
commit
4bbe7f68da
21 files changed
+3287
No files matched your search
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🌌 Parallax Star Background
|
||||
|
||||
Многослойный анимированный фон звездного неба с эффектом параллакса. Звезды разного размера движутся с разной скоростью, создавая ощущение полета сквозь глубокий космос.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **Performance Optimized**: Сотни звезд генерируются как тени (`box-shadow`) одного элемента, что значительно экономит ресурсы процессора.
|
||||
- **Parallax Effect**: Три слоя звезд (`#stars`, `#stars2`, `#stars3`) движутся с разной скоростью, создавая иллюзию объема.
|
||||
- **Pure CSS**: Вся логика анимации и визуализации построена на стандартных свойствах CSS без использования тяжелых JS-библиотек.
|
||||
|
||||
### Технические детали
|
||||
|
||||
- **Background**: Используется `radial-gradient` для создания мягкого свечения у горизонта.
|
||||
- **Keyframes**: Анимация `animStar` плавно перемещает слои снизу вверх, зацикливая движение.
|
||||
- **Sass Origin**: Оригинальный код был сгенерирован функцией Sass для рандомизации координат, в текущем репозитории представлена чистая CSS-версия.
|
||||
Executable
+28
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Parallax Star background in CSS</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
|
||||
<div id='stars'></div>
|
||||
<div id='stars2'></div>
|
||||
<div id='stars3'></div>
|
||||
<div id='title'>
|
||||
<span>
|
||||
PURE CSS
|
||||
</span>
|
||||
<br>
|
||||
<span>
|
||||
PARALLAX PIXEL STARS
|
||||
</span>
|
||||
</div>
|
||||
<!-- partial -->
|
||||
<script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+85
@@ -0,0 +1,85 @@
|
||||
html {
|
||||
height: 100%;
|
||||
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#stars {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777pLine truncated
|
||||
animation: animStar 50s linear infinite;
|
||||
}
|
||||
#stars:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 2000px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
background: transparent;
|
||||
box-shadow: 791px 689px #FFF , 1793px 1755px #FFF , 1404px 922px #FFF , 1690px 1534px #FFF , 448px 1961px #FFF , 548px 1718px #FFF , 1880px 221px #FFF , 951px 2000px #FFF , 1842px 1157px #FFF , 1929px 1220px #FFF , 725px 895px #FFF , 1668px 625px #FFF , 845px 1456px #FFF , 1682px 1431px #FFF , 1945px 1666px #FFF , 607px 248px #FFF , 665px 398px #FFF , 74px 1511px #FFF , 775px 712px #FFF , 626px 1566px #FFF , 583px 59px #FFF , 628px 300px #FFF , 828px 1996px #FFF , 1202px 1612px #FFF , 866px 1350px #FFF , 959px 1048px #FFF , 434px 1811px #FFF , 939px 1614px #FFF , 1793px 1772px #FFF , 453px 764px #FFF , 241px 1210px #FFF , 962px 897px #FFF , 204px 753px #FFF , 505px 1888px #FFF , 467px 1895px #FFF , 1079px 85px #FFF , 88px 1217px #FFF , 1983px 284px #FFF , 207px 1348px #FFF , 732px 263px #FFF , 1421px 1444px #FFF , 293px 163px #FFF , 1070px 1909px #FFF , 1510px 1064px #FFF , 178px 1855px #FFF , 1842px 261px #FFF , 1812px 606px #FFF , 255px 44px #FFF , 486px 198px #FFF , 693px 1607px #FFF , 1848px 887px #FFF , 1638px 879px #FFF , 1144px 1975px #FFF , 1753px 932px #FFF , 710px 37px #FFF , 750px 738px #FFF , 1865px 1266px #FFF , 1503px 149px #FFF , 469px 1340px #FFF , 1951px 1295px #FFF , 1971px 1158px #FFF , 1801px 1381px #FFF , 229px 1030px #FFF , 1336px 514px #FFF , 1103px 576px #FFF , 1526px 1663px #FFF , 1480px 1530px #FFF , 264px 288px #FFF , 306px 1780px #FFF , 586px 1494px #FFF , 1781px 758px #FFF , 1313px 1087px #FFF , 1461px 293px #FFF , 938px 432px #FFF , 1727px 1090px #FFF , 919px 382px #FFF , 829px 1806px #FFF , 213px 1642px #FFF , 7px 362px #FFF , 1637px 718px #FFF , 1939px 1908px #FFF , 868px 351px #FFF , 1258px 657px #FFF , 237px 1442px #FFF , 1083px 655px #FFF , 527px 930px #FFF , 1077px 105px #FFF , 953px 37px #FFF , 1578px 668px #FFF , 1165px 14px #FFF , 69px 789px #FFF , 415px 1726px #FFF , 814px 811px #FFF , 1866px 1430px #FFF , 593px 1543px #FFF , 1238px 1842px #FFF , 359px 1630px #FFF , 1117px 1036px #FFF , 706px 790px #FFF , 551px 904px #FFF , 1684px 1586px #FFF , 1424px 1866px #FFF , 1276px 1001px #FFF , 1246px 1076px #FFF , 685px 1711px #FFF , 1566px 1080px #FFF , 5px 821px #FFF , 1507px 716px #FFF , 573px 1933px #FFF , 712px 1523px #FFF , 1221px 1303px #FFF , 1831px 1525px #FFF , 766px 825px #FFF , 1236px 387px #FFF , 1726px 1695px #FFF , 424px 129px #FFF , 514px 871px #FFF , 950px 1820px #FFF , 751px 982px #FFF , 1652px 409px #FFF , 347px 506px #FFF , 862px 316px #FFF , 1193px 623px #FFF , 768px 91px #FFF , 855px 724px #FFF , 505px 284px #FFF , 1485px 946px #FFF , 132px 134px #FFF , 1155px 1522px #FFF , 1058px 1392px #FFF , 544px 1625px #FFF , 142px 711px #FFF , 559px 1772px #FFF , 843px 1623px #FFF , 41px 553px #FFF , 802px 770px #FFF , 1237px 478px #FFF , 1497px 794px #FFF , 964px 1778px #FFF , 1614px 32px #FFF , 255px 1628px #FFF , 969px 410px #FFF , 67px 964px #FFF , 745px 474px #FFF , 536px 732px #FFF , 1568px 1510px #FFF , 360px 687px #FFF , 1779px 557px #FFF , 1180px 318px #FFF , 1837px 890px #FFF , 1127px 445px #FFF , 1801px 187px #FFF , 428px 1422px #FFF , 622px 241px #FFF , 360px 1620px #FFF , 1004px 618px #FFF , 1057px 205px #FFF , 678px 1832px #FFF , 235px 1529px #FFF , 791px 258px #FFF , 1844px 1333px #FFF , 989px 1278px #FFF , 138px 230px #FFF , 69px 1560px #FFF , 1226px 269px #FFF , 980px 1186px #FFF , 457px 1383px #FFF , 759px 107px #FFF , 1812px 306px #FFF , 1967px 1404px #FFF , 150px 1658px #FFF , 894px 314px #FFF , 1571px 1456px #FFF , 1921px 181px #FFF , 108px 1669px #FFF , 1296px 1233px #FFF , 1157px 1127px #FFF , 462px 672px #FFF , 1720px 625px #FFF , 1870px 1770px #FFF , 1603px 476px #FFF , 1963px 1137px #FFF , 979px 864px #FFF , 648px 170px #FFF , 1831px 1505px #FFF , 729px 1292px #FFF , 1024px 1683px #FFF , 200px 143px #FFF , 1566px 1202px #FFF , 772px 468px #FFF , 1198px 1677px #FFF , 1758px 535px #FFF , 232px 1233px #FFF , 1395px 935px #FFF , 1774px 1621px #FFF , 1424px 400px #FFF , 962px 1594px #FFF , 967px 981px #FFF , 580px 525px #FFF , 59px 1138px #FFF , 1736px 963px #FFF , 845px 568px #FFF , 1723px 1051px #FFF , 203px 1235px #FFF , 1718px 1458px #FFF , 309px 65px #FFF , 331px 1779px #FFF , 1963px 1340px #FFF , 819px 1710px #FFF , 255px 426px #FFF , 578px 1998px #FFF , 1537px 1626px #FFF , 766px 492px #FFF , 774px 312px #FFF , 475px 831px #FFF , 571px 1900px #FFF , 594px 723px #FFF , 212px 1872px #FFF , 423px 959px #FFF , 48px 506px #FFF , 275px 1617px #FFF , 1460px 1875px #FFF , 1614px 469px #FFF , 642px 1330px #FFF , 962px 902px #FFF , 355px 1904px #FFF , 825px 213px #FFF , 983px 774px #FFF , 828px 1154px #FFF , 698px 1564px #FFF , 637px 195px #FFF , 378px 1596px #FFF , 1485px 1901px #FFF , 878px 686px #FFF , 1964px 814px #FFF , 1356px 347px #FFF , 1334px 1607px #FFF , 90px 1490px #FFF , 1277px 1088px #FFF , 620px 1844px #FFF , 895px 154px #FFF , 1122px 532px #FFF , 1871px 1954px #FFF , 1901px 76px #FFF , 65px 1712px #FFF , 1788px 1947px #FFF , 130px 1569px #FFF , 1985px 735px #FFF , 362px 775px #FFF , 1835px 1515px #FFF , 392px 1635px #FFF , 1777pLine truncated
|
||||
}
|
||||
|
||||
#stars2 {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF;
|
||||
animation: animStar 100s linear infinite;
|
||||
}
|
||||
#stars2:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 2000px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: transparent;
|
||||
box-shadow: 200px 533px #FFF , 16px 1336px #FFF , 140px 1418px #FFF , 767px 1679px #FFF , 637px 372px #FFF , 462px 1026px #FFF , 285px 1837px #FFF , 1447px 283px #FFF , 690px 99px #FFF , 1528px 517px #FFF , 803px 1446px #FFF , 1601px 1443px #FFF , 708px 1714px #FFF , 381px 638px #FFF , 1477px 407px #FFF , 292px 1583px #FFF , 979px 374px #FFF , 1937px 239px #FFF , 807px 1013px #FFF , 1320px 1148px #FFF , 556px 782px #FFF , 1382px 598px #FFF , 560px 347px #FFF , 1750px 1075px #FFF , 777px 876px #FFF , 1184px 1914px #FFF , 1310px 1050px #FFF , 302px 179px #FFF , 673px 169px #FFF , 1206px 752px #FFF , 1377px 15px #FFF , 889px 1363px #FFF , 510px 149px #FFF , 1861px 975px #FFF , 911px 1304px #FFF , 653px 1786px #FFF , 1019px 1957px #FFF , 1449px 895px #FFF , 1755px 1162px #FFF , 575px 195px #FFF , 1916px 717px #FFF , 195px 1267px #FFF , 1545px 1445px #FFF , 637px 1795px #FFF , 1758px 1252px #FFF , 921px 1185px #FFF , 1019px 513px #FFF , 513px 23px #FFF , 187px 540px #FFF , 1219px 1090px #FFF , 1691px 451px #FFF , 1390px 771px #FFF , 458px 496px #FFF , 1073px 556px #FFF , 1367px 1491px #FFF , 1044px 663px #FFF , 173px 1480px #FFF , 1678px 79px #FFF , 1179px 770px #FFF , 551px 1330px #FFF , 104px 846px #FFF , 257px 422px #FFF , 874px 185px #FFF , 493px 1231px #FFF , 87px 979px #FFF , 1374px 844px #FFF , 1132px 687px #FFF , 754px 1958px #FFF , 645px 224px #FFF , 1757px 18px #FFF , 735px 918px #FFF , 329px 1011px #FFF , 1854px 1812px #FFF , 1191px 980px #FFF , 498px 834px #FFF , 592px 1114px #FFF , 1973px 1173px #FFF , 1092px 1308px #FFF , 326px 639px #FFF , 408px 387px #FFF , 1898px 1272px #FFF , 56px 1523px #FFF , 1755px 1376px #FFF , 1472px 439px #FFF , 1063px 88px #FFF , 1043px 567px #FFF , 1950px 817px #FFF , 1571px 1091px #FFF , 681px 1330px #FFF , 1002px 1167px #FFF , 1560px 1145px #FFF , 478px 841px #FFF , 588px 1593px #FFF , 1227px 1580px #FFF , 1027px 1800px #FFF , 97px 1481px #FFF , 1535px 261px #FFF , 1547px 674px #FFF , 1271px 1257px #FFF , 514px 285px #FFF , 1320px 1605px #FFF , 1166px 1941px #FFF , 1709px 1680px #FFF , 440px 1094px #FFF , 304px 340px #FFF , 933px 599px #FFF , 1763px 1799px #FFF , 1359px 1449px #FFF , 725px 390px #FFF , 1061px 337px #FFF , 1802px 1500px #FFF , 1157px 1560px #FFF , 1832px 1918px #FFF , 1296px 1093px #FFF , 1786px 1950px #FFF , 744px 1049px #FFF , 1178px 1932px #FFF , 631px 1776px #FFF , 1237px 558px #FFF , 1654px 450px #FFF , 402px 1757px #FFF , 253px 1703px #FFF , 1119px 1460px #FFF , 1999px 182px #FFF , 1896px 398px #FFF , 709px 1997px #FFF , 454px 19px #FFF , 1623px 1157px #FFF , 1118px 416px #FFF , 1791px 849px #FFF , 858px 1795px #FFF , 942px 647px #FFF , 710px 583px #FFF , 1742px 1652px #FFF , 446px 1232px #FFF , 520px 385px #FFF , 1294px 1975px #FFF , 1132px 1685px #FFF , 478px 1743px #FFF , 1877px 79px #FFF , 222px 1699px #FFF , 314px 710px #FFF , 106px 1669px #FFF , 111px 1510px #FFF , 685px 1052px #FFF , 978px 595px #FFF , 529px 1209px #FFF , 498px 138px #FFF , 303px 1408px #FFF , 1367px 323px #FFF , 1530px 1481px #FFF , 252px 444px #FFF , 602px 232px #FFF , 1727px 1102px #FFF , 72px 97px #FFF , 1194px 1068px #FFF , 1622px 604px #FFF , 483px 1436px #FFF , 435px 159px #FFF , 1087px 1891px #FFF , 136px 371px #FFF , 519px 988px #FFF , 319px 1715px #FFF , 70px 812px #FFF , 1804px 1027px #FFF , 1438px 488px #FFF , 1179px 919px #FFF , 1708px 1170px #FFF , 1578px 1229px #FFF , 703px 1828px #FFF , 1512px 44px #FFF , 895px 435px #FFF , 1993px 1009px #FFF , 1655px 37px #FFF , 1326px 1519px #FFF , 1213px 485px #FFF , 497px 1739px #FFF , 1616px 1294px #FFF , 1051px 1003px #FFF , 178px 1462px #FFF , 289px 1192px #FFF , 1338px 296px #FFF , 401px 751px #FFF , 254px 1271px #FFF , 184px 691px #FFF , 1730px 222px #FFF , 1311px 1853px #FFF , 873px 1029px #FFF , 1278px 1429px #FFF , 1916px 1420px #FFF , 595px 1678px #FFF , 1406px 762px #FFF , 127px 461px #FFF , 1348px 1314px #FFF , 979px 1641px #FFF , 1534px 1535px #FFF , 1386px 751px #FFF , 1724px 1519px #FFF , 1136px 1860px #FFF , 728px 705px #FFF;
|
||||
}
|
||||
|
||||
#stars3 {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: transparent;
|
||||
box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF;
|
||||
animation: animStar 150s linear infinite;
|
||||
}
|
||||
#stars3:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
top: 2000px;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
background: transparent;
|
||||
box-shadow: 633px 1097px #FFF , 982px 1284px #FFF , 515px 709px #FFF , 859px 139px #FFF , 649px 229px #FFF , 1248px 1199px #FFF , 1468px 1956px #FFF , 1250px 1830px #FFF , 1135px 1406px #FFF , 712px 741px #FFF , 1016px 247px #FFF , 929px 1963px #FFF , 1397px 366px #FFF , 609px 661px #FFF , 1163px 417px #FFF , 1058px 1661px #FFF , 1749px 123px #FFF , 993px 209px #FFF , 851px 161px #FFF , 807px 940px #FFF , 296px 1582px #FFF , 1136px 613px #FFF , 1364px 1382px #FFF , 1993px 780px #FFF , 1151px 1854px #FFF , 1109px 617px #FFF , 1353px 626px #FFF , 1807px 1240px #FFF , 33px 904px #FFF , 1666px 1067px #FFF , 323px 1647px #FFF , 799px 476px #FFF , 1084px 1844px #FFF , 1157px 633px #FFF , 1611px 1947px #FFF , 919px 183px #FFF , 871px 1788px #FFF , 590px 864px #FFF , 1800px 934px #FFF , 1229px 443px #FFF , 161px 1398px #FFF , 899px 1458px #FFF , 1071px 661px #FFF , 1002px 135px #FFF , 1962px 1968px #FFF , 1865px 1534px #FFF , 1616px 599px #FFF , 529px 334px #FFF , 1910px 1093px #FFF , 206px 25px #FFF , 460px 388px #FFF , 1483px 1301px #FFF , 925px 474px #FFF , 1319px 1538px #FFF , 1842px 1759px #FFF , 165px 1865px #FFF , 1873px 198px #FFF , 1718px 1316px #FFF , 340px 1254px #FFF , 431px 40px #FFF , 1627px 342px #FFF , 168px 99px #FFF , 694px 238px #FFF , 1578px 708px #FFF , 1608px 1831px #FFF , 1357px 462px #FFF , 1214px 1066px #FFF , 1488px 291px #FFF , 1218px 1238px #FFF , 353px 785px #FFF , 1649px 649px #FFF , 1262px 1205px #FFF , 1040px 856px #FFF , 1313px 649px #FFF , 305px 798px #FFF , 1165px 1389px #FFF , 108px 12px #FFF , 45px 1452px #FFF , 302px 438px #FFF , 872px 1280px #FFF , 269px 898px #FFF , 422px 950px #FFF , 453px 1122px #FFF , 1107px 1168px #FFF , 585px 103px #FFF , 317px 1707px #FFF , 1003px 1356px #FFF , 1374px 160px #FFF , 756px 100px #FFF , 1677px 986px #FFF , 1001px 453px #FFF , 1062px 1968px #FFF , 1791px 441px #FFF , 734px 1341px #FFF , 1109px 1180px #FFF , 514px 1231px #FFF , 963px 1379px #FFF , 1203px 155px #FFF , 72px 546px #FFF , 533px 1629px #FFF;
|
||||
}
|
||||
|
||||
#title {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-family: "lato", sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 50px;
|
||||
letter-spacing: 10px;
|
||||
margin-top: -60px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#title span {
|
||||
background: -webkit-linear-gradient(white, #38495a);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes animStar {
|
||||
from {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
}
|
||||
Executable
+95
@@ -0,0 +1,95 @@
|
||||
@import compass
|
||||
|
||||
|
||||
// n is number of stars required
|
||||
@function multiple-box-shadow ($n)
|
||||
$value: '#{random(2000)}px #{random(2000)}px #FFF'
|
||||
@for $i from 2 through $n
|
||||
$value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'
|
||||
|
||||
@return unquote($value)
|
||||
|
||||
$shadows-small: multiple-box-shadow(700)
|
||||
$shadows-medium: multiple-box-shadow(200)
|
||||
$shadows-big: multiple-box-shadow(100)
|
||||
|
||||
html
|
||||
height: 100%
|
||||
background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%)
|
||||
overflow: hidden
|
||||
|
||||
#stars
|
||||
width: 1px
|
||||
height: 1px
|
||||
background: transparent
|
||||
box-shadow: $shadows-small
|
||||
animation : animStar 50s linear infinite
|
||||
|
||||
&:after
|
||||
content: " "
|
||||
position: absolute
|
||||
top: 2000px
|
||||
width: 1px
|
||||
height: 1px
|
||||
background: transparent
|
||||
box-shadow: $shadows-small
|
||||
|
||||
#stars2
|
||||
width: 2px
|
||||
height: 2px
|
||||
background: transparent
|
||||
box-shadow: $shadows-medium
|
||||
animation : animStar 100s linear infinite
|
||||
|
||||
&:after
|
||||
content: " "
|
||||
position: absolute
|
||||
top: 2000px
|
||||
width: 2px
|
||||
height: 2px
|
||||
background: transparent
|
||||
box-shadow: $shadows-medium
|
||||
|
||||
#stars3
|
||||
width: 3px
|
||||
height: 3px
|
||||
background: transparent
|
||||
box-shadow: $shadows-big
|
||||
animation : animStar 150s linear infinite
|
||||
|
||||
&:after
|
||||
content: " "
|
||||
position: absolute
|
||||
top: 2000px
|
||||
width: 3px
|
||||
height: 3px
|
||||
background: transparent
|
||||
box-shadow: $shadows-big
|
||||
|
||||
#title
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 0
|
||||
right: 0
|
||||
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-family: 'lato',sans-serif
|
||||
font-weight: 300
|
||||
font-size: 50px
|
||||
letter-spacing: 10px
|
||||
|
||||
margin-top: -60px
|
||||
padding-left: 10px
|
||||
|
||||
span
|
||||
background: -webkit-linear-gradient(white, #38495a)
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
|
||||
@keyframes animStar
|
||||
from
|
||||
transform: translateY(0px)
|
||||
to
|
||||
transform: translateY(-2000px)
|
||||
|
||||
Reference in new issue
Block a user