Блог

Главная - Вопросы по программированию - Как правильно сгенерировать кучу случайных местоположений пикселей?

Как правильно сгенерировать кучу случайных местоположений пикселей?

#javascript #html #css #frontend

#javascript #HTML #css #интерфейс

Вопрос:

Это, вероятно, вопрос для новичков, но я новичок в интерфейсной разработке, и я просто пытаюсь создать действительно простой веб-сайт для резюме как проект.

Я нашел в Интернете шаблон css, который имеет классный эффект со звездочками, плавно переходящими в фоновом режиме, с кодом внизу, который я пытаюсь использовать в качестве фона.

Проблема в том, что они жестко закодировали все позиции теней, и они останавливаются в определенный момент, когда вы уменьшаете масштаб экрана. Есть ли функция для случайной генерации этих местоположений пикселей? Можно ли это сделать на JavaScript?

Заранее спасибо!!

CSS

 html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 528px 1411px #FFF , 369px 662px #FFF , 1902px 2000px #FFF , 529px 1456px #FFF , 1280px 1023px #FFF , 1545px 828px #FFF , 85px 368px #FFF , 1312px 1383px #FFF , 188px 1097px #FFF , 1982px 1286px #FFF , 1331px 25px #FFF , 1605px 602px #FFF , 866px 397px #FFF , 963px 950px #FFF , 1442px 250px #FFF , 303px 1197px #FFF , 361px 584px #FFF , 203px 379px #FFF , 1848px 368px #FFF , 1325px 169px #FFF , 585px 1330px #FFF , 1870px 1210px #FFF , 1952px 686px #FFF , 892px 1939px #FFF , 28px 1668px #FFF , 1471px 106px #FFF , 137px 1157px #FFF , 1px 137px #FFF , 41px 506px #FFF , 1948px 128px #FFF , 355px 1017px #FFF , 1213px 528px #FFF , 785px 438px #FFF , 1816px 1279px #FFF , 23px 899px #FFF , 321px 1259px #FFF , 1123px 1313px #FFF , 1504px 1042px #FFF , 538px 658px #FFF , 286px 979px #FFF , 1471px 777px #FFF , 1902px 1852px #FFF , 319px 690px #FFF , 276px 864px #FFF , 1512px 1781px #FFF , 1678px 678px #FFF , 1071px 841px #FFF , 935px 999px #FFF , 1288px 1207px #FFF , 1292px 200px #FFF , 1112px 1338px #FFF , 79px 1621px #FFF , 386px 1487px #FFF , 1782px 1142px #FFF , 173px 1802px #FFF , 1998px 649px #FFF , 1761px 1649px #FFF , 216px 186px #FFF , 1972px 404px #FFF , 1302px 1835px #FFF , 424px 873px #FFF , 87px 526px #FFF , 1734px 1901px #FFF , 1883px 1361px #FFF , 1677px 1548px #FFF , 607px 1964px #FFF , 1726px 1785px #FFF , 897px 881px #FFF , 796px 219px #FFF , 972px 1805px #FFF , 16px 1435px #FFF , 598px 178px #FFF , 909px 104px #FFF , 1941px 244px #FFF , 595px 1075px #FFF , 1638px 1047px #FFF , 1174px 821px #FFF , 1833px 533px #FFF , 1870px 1433px #FFF , 1849px 815px #FFF , 413px 1462px #FFF , 333px 1487px #FFF , 431px 1000px #FFF , 818px 937px #FFF , 1673px 288px #FFF , 1970px 1804px #FFF , 1850px 23px #FFF , 475px 436px #FFF , 1170px 1633px #FFF , 1578px 464px #FFF , 1866px 1747px #FFF , 37px 543px #FFF , 610px 809px #FFF , 1636px 486px #FFF , 686px 1368px #FFF , 1997px 1498px #FFF , 75px 1347px #FFF , 345px 782px #FFF , 1128px 1453px #FFF , 61px 1563px #FFF , 592px 142px #FFF , 1487px 1641px #FFF , 804px 746px #FFF , 1053px 657px #FFF , 1535px 688px #FFF , 729px 1604px #FFF , 1011px 1902px #FFF , 749px 119px #FFF , 1078px 882px #FFF , 359px 940px #FFF , 613px 1218px #FFF , 1339px 417px #FFF , 1408px 86px #FFF , 318px 1090px #FFF , 1118px 945px #FFF , 499px 490px #FFF , 40px 186px #FFF , 1009px 1258px #FFF , 1296px 120px #FFF , 552px 1826px #FFF , 1023px 1145px #FFF , 744px 1042px #FFF , 1165px 376px #FFF , 1775px 1974px #FFF , 175px 1269px #FFF , 721px 731px #FFF , 924px 1363px #FFF , 539px 771px #FFF , 1356px 144px #FFF , 1034px 718px #FFF , 1868px 460px #FFF , 1252px 1478px #FFF , 1864px 641px #FFF , 514px 1279px #FFF , 56px 877px #FFF , 1365px 291px #FFF , 526px 594px #FFF , 476px 1258px #FFF , 1376px 573px #FFF , 326px 1625px #FFF , 1053px 1381px #FFF , 1322px 1371px #FFF , 358px 942px #FFF , 924px 1620px #FFF , 1165px 1015px #FFF , 511px 422px #FFF , 1548px 1374px #FFF , 198px 1405px #FFF , 1193px 1548px #FFF , 1546px 1657px #FFF , 1195px 447px #FFF , 1184px 1378px #FFF , 702px 1163px #FFF , 654px 1041px #FFF , 1418px 1388px #FFF , 1853px 65px #FFF , 1394px 595px #FFF , 1443px 1864px #FFF , 1998px 782px #FFF , 647px 1125px #FFF , 1385px 342px #FFF , 1157px 614px #FFF , 1692px 574px #FFF , 563px 1548px #FFF , 1250px 1484px #FFF , 432px 999px #FFF , 976px 14px #FFF , 1565px 1097px #FFF , 1855px 511px #FFF , 296px 1854px #FFF , 989px 970px #FFF , 306px 1606px #FFF , 1115px 252px #FFF , 1602px 1832px #FFF , 896px 1635px #FFF , 678px 1137px #FFF , 943px 1332px #FFF , 578px 572px #FFF , 1295px 360px #FFF , 639px 296px #FFF , 1517px 1282px #FFF , 945px 588px #FFF , 238px 1222px #FFF , 1059px 1799px #FFF , 1422px 1358px #FFF , 490px 1177px #FFF , 1985px 652px #FFF , 1840px 1138px #FFF , 1491px 1735px #FFF , 935px 782px #FFF , 339px 1595px #FFF , 1693px 1284px #FFF , 1425px 200px #FFF , 1896px 1454px #FFF , 324px 1955px #FFF , 317px 1375px #FFF , 346px 1472px #FFF , 646px 1998px #FFF , 777px 1879px #FFF , 1555px 778px #FFF , 317px 365px #FFF , 52px 1983px #FFF , 1312px 1413px #FFF , 1871px 1095px #FFF , 568px 1664px #FFF , 1790px 1593px #FFF , 1311px 799px #FFF , 678px 984px #FFF , 409px 340px #FFF , 1308px 1032px #FFF , 59px 164px #FFF , 915px 210px #FFF , 553px 1027px #FFF , 859px 1836px #FFF , 36px 207px #FFF , 1018px 525px #FFF , 2000px 791px #FFF , 1980px 736px #FFF , 1709px 25px #FFF , 291px 1104px #FFF , 1821px 758px #FFF , 11px 232px #FFF , 290px 607px #FFF , 950px 96px #FFF , 1068px 813px #FFF , 266px 210px #FFF , 857px 747px #FFF , 1398px 1123px #FFF , 413px 1808px #FFF , 954px 1766px #FFF , 727px 1687px #FFF , 1179px 1705px #FFF , 778px 581px #FFF , 1299px 75px #FFF , 1534px 899px #FFF , 1541px 310px #FFF , 1484px 40px #FFF , 495px 663px #FFF , 824px 826px #FFF , 1214px 1396px #FFF , 443px 1179px #FFF , 800px 325px #FFF , 1071px 1051px #FFF , 825px 41px #FFF , 693px 1117px #FFF , 1480px 250px #FFF , 596px 1808px #FFF , 1776px 1524px #FFF , 1780px 593px #FFF , 1041px 547px #FFF , 1017px 546px #FFF , 682px 427px #FFF , 1685px 938px #FFF , 1276px 94px #FFF , 950px 1697px #FFF , 1419px 917px #FFF , 1932px 291px #FFF , 1232px 272px #FFF , 816px 1064px #FFF , 640px 668px #FFF , 925px 1169px #FFF , 1357px 1956px #FFF , 1971px 614px #FFF , 1049px 892px #FFF , 1518px 1223px #FFF , 1200px 1697px #FFF , 1386px 1565px #FFF , 376px 786px #FFF , 519px 842px #FFF , 1517px 998px #FFF , 812px 939px #FFF , 1687px 573px #FFF , 1260px 1613px #FFF , 669px 1755px #FFF , 1093px 198px #FFF , 551px 1047px #FFF , 841px 1405px #FFF , 1556px 1342px #FFF , 1101px 1887px #FFF , 1014px 1424px #FFF , 1270px 894px #FFF , 1925px 1796px #FFF , 1620px 1163px #FFF , 1081px 18px #FFF , 1161px 1433px #FFF , 1198px 1636px #FFF , 1819px 1542px #FFF , 217px 583px #FFF , 820px 904px #FFF , 1851px 1107px #FFF , 359px 383px #FFF , 1819px 1322px #FFF , 898px 521px #FFF , 36px 1810px #FFF , 314px 37px #FFF , 215px 1247px #FFF , 81px 1221px #FFF , 260px 427px #FFF , 1006px 46px #FFF , 942px 1659px #FFF , 1419px 1658px #FFF , 1099px 64px #FFF , 1678px 332px #FFF , 1292px 1025px #FFF , 742px 1217px #FFF , 217px 342px #FFF , 41px 591px #FFF , 1465px 211px #FFF , 337px 823px #FFF , 1503px 761px #FFF , 912px 850px #FFF , 290px 252px #FFF , 955px 1689px #FFF , 1756px 1324px #FFF , 1414px 325px #FFF , 1871px 1246px #FFF , 325px 1448px #FFF , 801px 686px #FFF , 1902px 992px #FFF , 1610px 3px #FFF , 1554px 1842px #FFF , 2px 1556px #FFF , 201px 705px #FFF , 1427px 1107px #FFF , 1076px 1948px #FFF , 1991px 1555px #FFF , 1647px 1810px #FFF , 554px 1654px #FFF , 245px 1598px #FFF , 1221px 530px #FFF , 637px 1580px #FFF , 161px 1481px #FFF , 128px 17px #FFF , 216px 867px #FFF , 760px 1045px #FFF , 915px 1631px #FFF , 696px 1027px #FFF , 1991px 572px #FFF , 987px 1783px #FFF , 1910px 437px #FFF , 1367px 261px #FFF , 602px 1741px #FFF , 1255px 635px #FFF , 290px 1480px #FFF , 563px 1623px #FFF , 884px 835px #FFF , 1565px 62px #FFF , 1891px 1616px #FFF , 1478px 1402px #FFF , 1792px 150px #FFF , 3px 1187px #FFF , 1658px 431px #FFF , 445px 1091px #FFF , 1793px 1080px #FFF , 839px 1081px #FFF , 115px 96px #FFF , 1899px 901px #FFF , 1414px 561px #FFF , 936px 867px #FFF , 640px 871px #FFF , 1549px 1341px #FFF , 171px 228px #FFF , 14px 984px #FFF , 1117px 1097px #FFF , 885px 1840px #FFF , 1595px 771px #FFF , 543px 1019px #FFF , 252px 1185px #FFF , 917px 489px #FFF , 851px 1522px #FFF , 633px 1530px #FFF , 588px 1543px #FFF , 1800px 501px #FFF , 1306px 1496px #FFF , 1112px 393px #FFF , 1973px 1822px #FFF , 1704px 68px #FFF , 1566px 743px #FFF , 1221px 295px #FFF , 867px 1248px #FFF , 879px 1945px #FFF , 961px 623px #FFF , 1274px 1932px #FFF , 1660px 1141px #FFF , 1606px 238px #FFF , 1456px 1435px #FFF , 1075px 1838px #FFF , 1237px 1016px #FFF , 1831px 696px #FFF , 230px 1331px #FFF , 1384px 1817px #FFF , 1177px 246px #FFF , 280px 357px #FFF , 848px 1963px #FFF , 542px 956px #FFF , 1074px 1838px #FFF , 590px 1201px #FFF , 892px 1534px #FFF , 1015px 1552px #FFF , 1358px 1588px #FFF , 473px 1891px #FFF , 1923px 1607px #FFF , 692px 1379px #FFF , 1743px 1775px #FFF , 1332px 599px #FFF , 1738px 693px #FFF , 1664px 1742px #FFF , 1734px 986px #FFF , 854px 87px #FFF , 1854px 1110px #FFF , 1757px 1918px #FFF , 1807px 34px #FFF , 493px 478px #FFF , 33px 873px #FFF , 1309px 1680px #FFF , 1180px 320px #FFF , 1161px 1984px #FFF , 15px 1907px #FFF , 951px 820px #FFF , 230px 74px #FFF , 645px 1649px #FFF , 1394px 1305px #FFF , 1770px 1515px #FFF , 1523px 1827px #FFF , 1272px 1024px #FFF , 1226px 459px #FFF , 1492px 1740px #FFF , 829px 917px #FFF , 934px 793px #FFF , 803px 1969px #FFF , 731px 668px #FFF , 849px 984px #FFF , 1181px 1851px #FFF , 47px 1682px #FFF , 851px 212px #FFF , 370px 1038px #FFF , 1808px 986px #FFF , 886px 1287px #FFF , 951px 76px #FFF , 548px 602px #FFF , 15px 1194px #FFF , 1267px 841px #FFF , 1397px 99px #FFF , 384px 1453px #FFF , 1299px 1431px #FFF , 352px 1174px #FFF , 1541px 416px #FFF , 113px 257px #FFF , 835px 1381px #FFF , 1517px 1038px #FFF , 1865px 1519px #FFF , 1519px 706px #FFF , 1911px 330px #FFF , 630px 461px #FFF , 678px 829px #FFF , 967px 1821px #FFF , 1504px 1056px #FFF , 1693px 761px #FFF , 1925px 645px #FFF , 1900px 1987px #FFF , 864px 1506px #FFF , 779px 1427px #FFF , 262px 1386px #FFF , 1835px 1366px #FFF , 1975px 1994px #FFF , 114px 1250px #FFF , 473px 922px #FFF , 1500px 31px #FFF , 736px 1818px #FFF , 52px 1714px #FFF , 530px 1666px #FFF , 628px 1235px #FFF , 718px 714px #FFF , 1107px 1654px #FFF , 252px 805px #FFF , 1715px 1310px #FFF , 1850px 58px #FFF , 1231px 1066px #FFF , 776px 1420px #FFF , 553px 1804px #FFF , 1843px 230px #FFF , 1278px 885px #FFF , 358px 895px #FFF , 442px 997px #FFF , 278px 246px #FFF , 233px 376px #FFF , 1581px 1222px #FFF , 510px 1211px #FFF , 731px 710px #FFF , 461px 940px #FFF , 1578px 1163px #FFF , 1660px 1864px #FFF , 1385px 430px #FFF , 1389px 407px #FFF , 133px 151px #FFF , 359px 1003px #FFF , 926px 73px #FFF , 1451px 860px #FFF , 1595px 304px #FFF , 398px 1874px #FFF , 1673px 212px #FFF , 1124px 717px #FFF , 92px 1967px #FFF , 381px 1377px #FFF , 1307px 1468px #FFF , 1477px 575px #FFF , 964px 1756px #FFF , 727px 806px #FFF , 1531px 286px #FFF , 1323px 1459px #FFF , 900px 1744px #FFF , 1486px 1122px #FFF , 1622px 1847px #FFF , 22px 1952px #FFF , 1443px 652px #FFF , 958px 798px #FFF , 1464px 7px #FFF , 395px 1705px #FFF , 480px 1653px #FFF , 472px 1576px #FFF , 933px 119px #FFF , 1047px 1048px #FFF , 57px 1039px #FFF , 1252px 669px #FFF , 949px 72px #FFF , 1284px 12px #FFF , 350px 993px #FFF , 2000px 1148px #FFF , 997px 939px #FFF , 818px 62px #FFF , 611px 1682px #FFF , 596px 485px #FFF , 1678px 1331px #FFF , 1336px 942px #FFF , 956px 979px #FFF , 1134px 678px #FFF , 1985px 1485px #FFF , 1124px 119px #FFF , 439px 142px #FFF , 1894px 676px #FFF , 488px 1221px #FFF , 349px 1568px #FFF , 1433px 342px #FFF , 1835px 1808px #FFF , 978px 990px #FFF , 1232px 1675px #FFF , 397px 373px #FFF , 260px 849px #FFF , 998px 566px #FFF , 896px 1309px #FFF , 112px 326px #FFF , 1586px 1872px #FFF , 682px 1673px #FFF , 52px 311px #FFF , 1293px 1754px #FFF , 797px 111px #FFF , 1679px 1023px #FFF , 1294px 33px #FFF , 290px 719px #FFF , 1564px 934px #FFF , 55px 1330px #FFF , 630px 1032px #FFF , 822px 1149px #FFF , 1138px 1124px #FFF , 1183px 1090px #FFF , 695px 1898px #FFF , 769px 1525px #FFF , 1889px 688px #FFF , 1287px 723px #FFF , 32px 960px #FFF , 1597px 880px #FFF , 1082px 62px #FFF , 1900px 1756px #FFF , 457px 163px #FFF , 427px 572px #FFF , 662px 1261px #FFF , 195px 889px #FFF , 1018px 1182px #FFF , 605px 1351px #FFF , 1373px 312px #FFF , 856px 1511px #FFF , 1551px 892px #FFF , 918px 856px #FFF , 704px 1995px #FFF , 1801px 407px #FFF , 675px 1882px #FFF , 1259px 713px #FFF , 658px 202px #FFF , 502px 1444px #FFF , 639px 1746px #FFF , 1850px 746px #FFF , 647px 276px #FFF , 333px 21px #FFF , 1621px 581px #FFF , 721px 70px #FFF , 504px 715px #FFF , 664px 921px #FFF , 757px 324px #FFF , 1560px 1647px #FFF , 351px 1038px #FFF , 1140px 243px #FFF , 858px 958px #FFF , 902px 572px #FFF , 1085px 692px #FFF , 15px 1990px #FFF , 634px 658px #FFF , 1037px 1657px #FFF , 672px 376px #FFF , 1938px 313px #FFF , 1775px 565px #FFF , 10px 1185px #FFF , 1645px 1042px #FFF , 834px 852px #FFF , 806px 1992px #FFF , 1551px 1587px #FFF , 1694px 1822px #FFF , 1441px 1981px #FFF , 1048px 288px #FFF , 666px 1378px #FFF , 1140px 1674px #FFF , 1235px 1124px #FFF , 1406px 30px #FFF , 353px 51px #FFF , 136px 407px #FFF , 196px 1842px #FFF , 1425px 495px #FFF , 292px 115px #FFF , 585px 7px #FFF , 1198px 1865px #FFF , 63px 1821px #FFF , 1503px 983px #FFF , 1259px 1729px #FFF , 315px 1696px #FFF , 1214px 1517px #FFF , 1267px 954px #FFF , 1733px 1206px #FFF , 1690px 879px #FFF , 1163px 885px #FFF , 187px 1204px #FFF , 834px 1428px #FFF , 1482px 505px #FFF , 218px 11px #FFF , 1532px 989px #FFF , 553px 153px #FFF , 270px 804px #FFF , 78px 820px #FFF , 1104px 1121px #FFF , 1993px 1727px #FFF , 244px 374px #FFF , 664px 688px #FFF , 807px 930px #FFF , 1047px 1371px #FFF , 1944px 1597px #FFF , 1347px 1421px #FFF , 1281px 979px #FFF , 59px 1008px #FFF , 982px 896px #FFF , 1852px 1036px #FFF , 1555px 1922px #FFF , 1840px 1449px #FFF , 279px 35px #FFF , 639px 1027px #FFF , 1036px 377px #FFF , 1299px 1504px #FFF , 1729px 696px #FFF , 1752px 1118px #FFF , 1090px 886px #FFF , 1595px 1819px #FFF , 724px 1663px #FFF , 587px 722px #FFF , 831px 989px #FFF , 1320px 1272px #FFF , 717px 1893px #FFF , 189px 1610px #FFF , 1306px 268px #FFF , 1894px 1146px #FFF , 1115px 130px #FFF , 1739px 242px #FFF , 444px 474px #FFF , 1860px 928px #FFF , 1389px 833px #FFF , 561px 1641px #FFF , 1880px 1695px #FFF , 1103px 1582px #FFF , 273px 1691px #FFF , 1966px 443px #FFF , 302px 672px #FFF , 638px 1138px #FFF , 1349px 384px #FFF , 333px 1512px #FFF , 1975px 690px #FFF , 765px 1366px #FFF , 1858px 1855px #FFF , 1285px 291px #FFF , 1719px 836px #FFF , 152px 900px #FFF , 1421px 102px #FFF , 1373px 1139px #FFF , 542px 1051px #FFF , 779px 352px #FFF;
  animation: animStar 50s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 528px 1411px #FFF , 369px 662px #FFF , 1902px 2000px #FFF , 529px 1456px #FFF , 1280px 1023px #FFF , 1545px 828px #FFF , 85px 368px #FFF , 1312px 1383px #FFF , 188px 1097px #FFF , 1982px 1286px #FFF , 1331px 25px #FFF , 1605px 602px #FFF , 866px 397px #FFF , 963px 950px #FFF , 1442px 250px #FFF , 303px 1197px #FFF , 361px 584px #FFF , 203px 379px #FFF , 1848px 368px #FFF , 1325px 169px #FFF , 585px 1330px #FFF , 1870px 1210px #FFF , 1952px 686px #FFF , 892px 1939px #FFF , 28px 1668px #FFF , 1471px 106px #FFF , 137px 1157px #FFF , 1px 137px #FFF , 41px 506px #FFF , 1948px 128px #FFF , 355px 1017px #FFF , 1213px 528px #FFF , 785px 438px #FFF , 1816px 1279px #FFF , 23px 899px #FFF , 321px 1259px #FFF , 1123px 1313px #FFF , 1504px 1042px #FFF , 538px 658px #FFF , 286px 979px #FFF , 1471px 777px #FFF , 1902px 1852px #FFF , 319px 690px #FFF , 276px 864px #FFF , 1512px 1781px #FFF , 1678px 678px #FFF , 1071px 841px #FFF , 935px 999px #FFF , 1288px 1207px #FFF , 1292px 200px #FFF , 1112px 1338px #FFF , 79px 1621px #FFF , 386px 1487px #FFF , 1782px 1142px #FFF , 173px 1802px #FFF , 1998px 649px #FFF , 1761px 1649px #FFF , 216px 186px #FFF , 1972px 404px #FFF , 1302px 1835px #FFF , 424px 873px #FFF , 87px 526px #FFF , 1734px 1901px #FFF , 1883px 1361px #FFF , 1677px 1548px #FFF , 607px 1964px #FFF , 1726px 1785px #FFF , 897px 881px #FFF , 796px 219px #FFF , 972px 1805px #FFF , 16px 1435px #FFF , 598px 178px #FFF , 909px 104px #FFF , 1941px 244px #FFF , 595px 1075px #FFF , 1638px 1047px #FFF , 1174px 821px #FFF , 1833px 533px #FFF , 1870px 1433px #FFF , 1849px 815px #FFF , 413px 1462px #FFF , 333px 1487px #FFF , 431px 1000px #FFF , 818px 937px #FFF , 1673px 288px #FFF , 1970px 1804px #FFF , 1850px 23px #FFF , 475px 436px #FFF , 1170px 1633px #FFF , 1578px 464px #FFF , 1866px 1747px #FFF , 37px 543px #FFF , 610px 809px #FFF , 1636px 486px #FFF , 686px 1368px #FFF , 1997px 1498px #FFF , 75px 1347px #FFF , 345px 782px #FFF , 1128px 1453px #FFF , 61px 1563px #FFF , 592px 142px #FFF , 1487px 1641px #FFF , 804px 746px #FFF , 1053px 657px #FFF , 1535px 688px #FFF , 729px 1604px #FFF , 1011px 1902px #FFF , 749px 119px #FFF , 1078px 882px #FFF , 359px 940px #FFF , 613px 1218px #FFF , 1339px 417px #FFF , 1408px 86px #FFF , 318px 1090px #FFF , 1118px 945px #FFF , 499px 490px #FFF , 40px 186px #FFF , 1009px 1258px #FFF , 1296px 120px #FFF , 552px 1826px #FFF , 1023px 1145px #FFF , 744px 1042px #FFF , 1165px 376px #FFF , 1775px 1974px #FFF , 175px 1269px #FFF , 721px 731px #FFF , 924px 1363px #FFF , 539px 771px #FFF , 1356px 144px #FFF , 1034px 718px #FFF , 1868px 460px #FFF , 1252px 1478px #FFF , 1864px 641px #FFF , 514px 1279px #FFF , 56px 877px #FFF , 1365px 291px #FFF , 526px 594px #FFF , 476px 1258px #FFF , 1376px 573px #FFF , 326px 1625px #FFF , 1053px 1381px #FFF , 1322px 1371px #FFF , 358px 942px #FFF , 924px 1620px #FFF , 1165px 1015px #FFF , 511px 422px #FFF , 1548px 1374px #FFF , 198px 1405px #FFF , 1193px 1548px #FFF , 1546px 1657px #FFF , 1195px 447px #FFF , 1184px 1378px #FFF , 702px 1163px #FFF , 654px 1041px #FFF , 1418px 1388px #FFF , 1853px 65px #FFF , 1394px 595px #FFF , 1443px 1864px #FFF , 1998px 782px #FFF , 647px 1125px #FFF , 1385px 342px #FFF , 1157px 614px #FFF , 1692px 574px #FFF , 563px 1548px #FFF , 1250px 1484px #FFF , 432px 999px #FFF , 976px 14px #FFF , 1565px 1097px #FFF , 1855px 511px #FFF , 296px 1854px #FFF , 989px 970px #FFF , 306px 1606px #FFF , 1115px 252px #FFF , 1602px 1832px #FFF , 896px 1635px #FFF , 678px 1137px #FFF , 943px 1332px #FFF , 578px 572px #FFF , 1295px 360px #FFF , 639px 296px #FFF , 1517px 1282px #FFF , 945px 588px #FFF , 238px 1222px #FFF , 1059px 1799px #FFF , 1422px 1358px #FFF , 490px 1177px #FFF , 1985px 652px #FFF , 1840px 1138px #FFF , 1491px 1735px #FFF , 935px 782px #FFF , 339px 1595px #FFF , 1693px 1284px #FFF , 1425px 200px #FFF , 1896px 1454px #FFF , 324px 1955px #FFF , 317px 1375px #FFF , 346px 1472px #FFF , 646px 1998px #FFF , 777px 1879px #FFF , 1555px 778px #FFF , 317px 365px #FFF , 52px 1983px #FFF , 1312px 1413px #FFF , 1871px 1095px #FFF , 568px 1664px #FFF , 1790px 1593px #FFF , 1311px 799px #FFF , 678px 984px #FFF , 409px 340px #FFF , 1308px 1032px #FFF , 59px 164px #FFF , 915px 210px #FFF , 553px 1027px #FFF , 859px 1836px #FFF , 36px 207px #FFF , 1018px 525px #FFF , 2000px 791px #FFF , 1980px 736px #FFF , 1709px 25px #FFF , 291px 1104px #FFF , 1821px 758px #FFF , 11px 232px #FFF , 290px 607px #FFF , 950px 96px #FFF , 1068px 813px #FFF , 266px 210px #FFF , 857px 747px #FFF , 1398px 1123px #FFF , 413px 1808px #FFF , 954px 1766px #FFF , 727px 1687px #FFF , 1179px 1705px #FFF , 778px 581px #FFF , 1299px 75px #FFF , 1534px 899px #FFF , 1541px 310px #FFF , 1484px 40px #FFF , 495px 663px #FFF , 824px 826px #FFF , 1214px 1396px #FFF , 443px 1179px #FFF , 800px 325px #FFF , 1071px 1051px #FFF , 825px 41px #FFF , 693px 1117px #FFF , 1480px 250px #FFF , 596px 1808px #FFF , 1776px 1524px #FFF , 1780px 593px #FFF , 1041px 547px #FFF , 1017px 546px #FFF , 682px 427px #FFF , 1685px 938px #FFF , 1276px 94px #FFF , 950px 1697px #FFF , 1419px 917px #FFF , 1932px 291px #FFF , 1232px 272px #FFF , 816px 1064px #FFF , 640px 668px #FFF , 925px 1169px #FFF , 1357px 1956px #FFF , 1971px 614px #FFF , 1049px 892px #FFF , 1518px 1223px #FFF , 1200px 1697px #FFF , 1386px 1565px #FFF , 376px 786px #FFF , 519px 842px #FFF , 1517px 998px #FFF , 812px 939px #FFF , 1687px 573px #FFF , 1260px 1613px #FFF , 669px 1755px #FFF , 1093px 198px #FFF , 551px 1047px #FFF , 841px 1405px #FFF , 1556px 1342px #FFF , 1101px 1887px #FFF , 1014px 1424px #FFF , 1270px 894px #FFF , 1925px 1796px #FFF , 1620px 1163px #FFF , 1081px 18px #FFF , 1161px 1433px #FFF , 1198px 1636px #FFF , 1819px 1542px #FFF , 217px 583px #FFF , 820px 904px #FFF , 1851px 1107px #FFF , 359px 383px #FFF , 1819px 1322px #FFF , 898px 521px #FFF , 36px 1810px #FFF , 314px 37px #FFF , 215px 1247px #FFF , 81px 1221px #FFF , 260px 427px #FFF , 1006px 46px #FFF , 942px 1659px #FFF , 1419px 1658px #FFF , 1099px 64px #FFF , 1678px 332px #FFF , 1292px 1025px #FFF , 742px 1217px #FFF , 217px 342px #FFF , 41px 591px #FFF , 1465px 211px #FFF , 337px 823px #FFF , 1503px 761px #FFF , 912px 850px #FFF , 290px 252px #FFF , 955px 1689px #FFF , 1756px 1324px #FFF , 1414px 325px #FFF , 1871px 1246px #FFF , 325px 1448px #FFF , 801px 686px #FFF , 1902px 992px #FFF , 1610px 3px #FFF , 1554px 1842px #FFF , 2px 1556px #FFF , 201px 705px #FFF , 1427px 1107px #FFF , 1076px 1948px #FFF , 1991px 1555px #FFF , 1647px 1810px #FFF , 554px 1654px #FFF , 245px 1598px #FFF , 1221px 530px #FFF , 637px 1580px #FFF , 161px 1481px #FFF , 128px 17px #FFF , 216px 867px #FFF , 760px 1045px #FFF , 915px 1631px #FFF , 696px 1027px #FFF , 1991px 572px #FFF , 987px 1783px #FFF , 1910px 437px #FFF , 1367px 261px #FFF , 602px 1741px #FFF , 1255px 635px #FFF , 290px 1480px #FFF , 563px 1623px #FFF , 884px 835px #FFF , 1565px 62px #FFF , 1891px 1616px #FFF , 1478px 1402px #FFF , 1792px 150px #FFF , 3px 1187px #FFF , 1658px 431px #FFF , 445px 1091px #FFF , 1793px 1080px #FFF , 839px 1081px #FFF , 115px 96px #FFF , 1899px 901px #FFF , 1414px 561px #FFF , 936px 867px #FFF , 640px 871px #FFF , 1549px 1341px #FFF , 171px 228px #FFF , 14px 984px #FFF , 1117px 1097px #FFF , 885px 1840px #FFF , 1595px 771px #FFF , 543px 1019px #FFF , 252px 1185px #FFF , 917px 489px #FFF , 851px 1522px #FFF , 633px 1530px #FFF , 588px 1543px #FFF , 1800px 501px #FFF , 1306px 1496px #FFF , 1112px 393px #FFF , 1973px 1822px #FFF , 1704px 68px #FFF , 1566px 743px #FFF , 1221px 295px #FFF , 867px 1248px #FFF , 879px 1945px #FFF , 961px 623px #FFF , 1274px 1932px #FFF , 1660px 1141px #FFF , 1606px 238px #FFF , 1456px 1435px #FFF , 1075px 1838px #FFF , 1237px 1016px #FFF , 1831px 696px #FFF , 230px 1331px #FFF , 1384px 1817px #FFF , 1177px 246px #FFF , 280px 357px #FFF , 848px 1963px #FFF , 542px 956px #FFF , 1074px 1838px #FFF , 590px 1201px #FFF , 892px 1534px #FFF , 1015px 1552px #FFF , 1358px 1588px #FFF , 473px 1891px #FFF , 1923px 1607px #FFF , 692px 1379px #FFF , 1743px 1775px #FFF , 1332px 599px #FFF , 1738px 693px #FFF , 1664px 1742px #FFF , 1734px 986px #FFF , 854px 87px #FFF , 1854px 1110px #FFF , 1757px 1918px #FFF , 1807px 34px #FFF , 493px 478px #FFF , 33px 873px #FFF , 1309px 1680px #FFF , 1180px 320px #FFF , 1161px 1984px #FFF , 15px 1907px #FFF , 951px 820px #FFF , 230px 74px #FFF , 645px 1649px #FFF , 1394px 1305px #FFF , 1770px 1515px #FFF , 1523px 1827px #FFF , 1272px 1024px #FFF , 1226px 459px #FFF , 1492px 1740px #FFF , 829px 917px #FFF , 934px 793px #FFF , 803px 1969px #FFF , 731px 668px #FFF , 849px 984px #FFF , 1181px 1851px #FFF , 47px 1682px #FFF , 851px 212px #FFF , 370px 1038px #FFF , 1808px 986px #FFF , 886px 1287px #FFF , 951px 76px #FFF , 548px 602px #FFF , 15px 1194px #FFF , 1267px 841px #FFF , 1397px 99px #FFF , 384px 1453px #FFF , 1299px 1431px #FFF , 352px 1174px #FFF , 1541px 416px #FFF , 113px 257px #FFF , 835px 1381px #FFF , 1517px 1038px #FFF , 1865px 1519px #FFF , 1519px 706px #FFF , 1911px 330px #FFF , 630px 461px #FFF , 678px 829px #FFF , 967px 1821px #FFF , 1504px 1056px #FFF , 1693px 761px #FFF , 1925px 645px #FFF , 1900px 1987px #FFF , 864px 1506px #FFF , 779px 1427px #FFF , 262px 1386px #FFF , 1835px 1366px #FFF , 1975px 1994px #FFF , 114px 1250px #FFF , 473px 922px #FFF , 1500px 31px #FFF , 736px 1818px #FFF , 52px 1714px #FFF , 530px 1666px #FFF , 628px 1235px #FFF , 718px 714px #FFF , 1107px 1654px #FFF , 252px 805px #FFF , 1715px 1310px #FFF , 1850px 58px #FFF , 1231px 1066px #FFF , 776px 1420px #FFF , 553px 1804px #FFF , 1843px 230px #FFF , 1278px 885px #FFF , 358px 895px #FFF , 442px 997px #FFF , 278px 246px #FFF , 233px 376px #FFF , 1581px 1222px #FFF , 510px 1211px #FFF , 731px 710px #FFF , 461px 940px #FFF , 1578px 1163px #FFF , 1660px 1864px #FFF , 1385px 430px #FFF , 1389px 407px #FFF , 133px 151px #FFF , 359px 1003px #FFF , 926px 73px #FFF , 1451px 860px #FFF , 1595px 304px #FFF , 398px 1874px #FFF , 1673px 212px #FFF , 1124px 717px #FFF , 92px 1967px #FFF , 381px 1377px #FFF , 1307px 1468px #FFF , 1477px 575px #FFF , 964px 1756px #FFF , 727px 806px #FFF , 1531px 286px #FFF , 1323px 1459px #FFF , 900px 1744px #FFF , 1486px 1122px #FFF , 1622px 1847px #FFF , 22px 1952px #FFF , 1443px 652px #FFF , 958px 798px #FFF , 1464px 7px #FFF , 395px 1705px #FFF , 480px 1653px #FFF , 472px 1576px #FFF , 933px 119px #FFF , 1047px 1048px #FFF , 57px 1039px #FFF , 1252px 669px #FFF , 949px 72px #FFF , 1284px 12px #FFF , 350px 993px #FFF , 2000px 1148px #FFF , 997px 939px #FFF , 818px 62px #FFF , 611px 1682px #FFF , 596px 485px #FFF , 1678px 1331px #FFF , 1336px 942px #FFF , 956px 979px #FFF , 1134px 678px #FFF , 1985px 1485px #FFF , 1124px 119px #FFF , 439px 142px #FFF , 1894px 676px #FFF , 488px 1221px #FFF , 349px 1568px #FFF , 1433px 342px #FFF , 1835px 1808px #FFF , 978px 990px #FFF , 1232px 1675px #FFF , 397px 373px #FFF , 260px 849px #FFF , 998px 566px #FFF , 896px 1309px #FFF , 112px 326px #FFF , 1586px 1872px #FFF , 682px 1673px #FFF , 52px 311px #FFF , 1293px 1754px #FFF , 797px 111px #FFF , 1679px 1023px #FFF , 1294px 33px #FFF , 290px 719px #FFF , 1564px 934px #FFF , 55px 1330px #FFF , 630px 1032px #FFF , 822px 1149px #FFF , 1138px 1124px #FFF , 1183px 1090px #FFF , 695px 1898px #FFF , 769px 1525px #FFF , 1889px 688px #FFF , 1287px 723px #FFF , 32px 960px #FFF , 1597px 880px #FFF , 1082px 62px #FFF , 1900px 1756px #FFF , 457px 163px #FFF , 427px 572px #FFF , 662px 1261px #FFF , 195px 889px #FFF , 1018px 1182px #FFF , 605px 1351px #FFF , 1373px 312px #FFF , 856px 1511px #FFF , 1551px 892px #FFF , 918px 856px #FFF , 704px 1995px #FFF , 1801px 407px #FFF , 675px 1882px #FFF , 1259px 713px #FFF , 658px 202px #FFF , 502px 1444px #FFF , 639px 1746px #FFF , 1850px 746px #FFF , 647px 276px #FFF , 333px 21px #FFF , 1621px 581px #FFF , 721px 70px #FFF , 504px 715px #FFF , 664px 921px #FFF , 757px 324px #FFF , 1560px 1647px #FFF , 351px 1038px #FFF , 1140px 243px #FFF , 858px 958px #FFF , 902px 572px #FFF , 1085px 692px #FFF , 15px 1990px #FFF , 634px 658px #FFF , 1037px 1657px #FFF , 672px 376px #FFF , 1938px 313px #FFF , 1775px 565px #FFF , 10px 1185px #FFF , 1645px 1042px #FFF , 834px 852px #FFF , 806px 1992px #FFF , 1551px 1587px #FFF , 1694px 1822px #FFF , 1441px 1981px #FFF , 1048px 288px #FFF , 666px 1378px #FFF , 1140px 1674px #FFF , 1235px 1124px #FFF , 1406px 30px #FFF , 353px 51px #FFF , 136px 407px #FFF , 196px 1842px #FFF , 1425px 495px #FFF , 292px 115px #FFF , 585px 7px #FFF , 1198px 1865px #FFF , 63px 1821px #FFF , 1503px 983px #FFF , 1259px 1729px #FFF , 315px 1696px #FFF , 1214px 1517px #FFF , 1267px 954px #FFF , 1733px 1206px #FFF , 1690px 879px #FFF , 1163px 885px #FFF , 187px 1204px #FFF , 834px 1428px #FFF , 1482px 505px #FFF , 218px 11px #FFF , 1532px 989px #FFF , 553px 153px #FFF , 270px 804px #FFF , 78px 820px #FFF , 1104px 1121px #FFF , 1993px 1727px #FFF , 244px 374px #FFF , 664px 688px #FFF , 807px 930px #FFF , 1047px 1371px #FFF , 1944px 1597px #FFF , 1347px 1421px #FFF , 1281px 979px #FFF , 59px 1008px #FFF , 982px 896px #FFF , 1852px 1036px #FFF , 1555px 1922px #FFF , 1840px 1449px #FFF , 279px 35px #FFF , 639px 1027px #FFF , 1036px 377px #FFF , 1299px 1504px #FFF , 1729px 696px #FFF , 1752px 1118px #FFF , 1090px 886px #FFF , 1595px 1819px #FFF , 724px 1663px #FFF , 587px 722px #FFF , 831px 989px #FFF , 1320px 1272px #FFF , 717px 1893px #FFF , 189px 1610px #FFF , 1306px 268px #FFF , 1894px 1146px #FFF , 1115px 130px #FFF , 1739px 242px #FFF , 444px 474px #FFF , 1860px 928px #FFF , 1389px 833px #FFF , 561px 1641px #FFF , 1880px 1695px #FFF , 1103px 1582px #FFF , 273px 1691px #FFF , 1966px 443px #FFF , 302px 672px #FFF , 638px 1138px #FFF , 1349px 384px #FFF , 333px 1512px #FFF , 1975px 690px #FFF , 765px 1366px #FFF , 1858px 1855px #FFF , 1285px 291px #FFF , 1719px 836px #FFF , 152px 900px #FFF , 1421px 102px #FFF , 1373px 1139px #FFF , 542px 1051px #FFF , 779px 352px #FFF;
}
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

HTML

 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resume Site</title>
  <link rel="stylesheet" href="./style.css">=
</head>
<body>
<!-- Add Stars-->
<div id='stars'></div>

</body>
</html>

Комментарии:

1. Вы можете использовать: vincentgarreau.com/particles.js

2. я посмотрю на это.

Ответ №1:

Привет, я был немного заинтригован вашим вопросом, поэтому я сделал следующий фрагмент, чтобы получить то, что, как я думаю, вы хотите. Он использует концепцию переменной CSS и немного вычисляет значения с использованием Math.random() and document.documentElement.clientWidth/clientHeight . Не самый лучший вариант, но, возможно, вы можете улучшить его, используя гораздо лучший генератор случайных координат.

 function generateRandomValues(length)
{
let output = "";
 for(let index = 0;index<length;index  ){
 
 const x = Math.floor(Math.random()*document.documentElement.clientWidth);
 const y = Math.floor(Math.random()*document.documentElement.clientHeight   (Math.random()*2000));
 
 if(index<length-1)
 output  = `${x}px ${y}px #FFF , `;
 else
 output  = `${x}px ${y}px #FFF`
 
 }
 return output;
}

const values = generateRandomValues(1500);

document.documentElement.style.setProperty('--value',values); 
 html {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  --value : 0
}

#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:var(--value);
  animation: animStar 40s linear infinite;
}

#stars:after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: var(--value);
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
} 
 <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Resume Site</title>
  <link rel="stylesheet" href="./style.css">=
</head>
<body>
<!-- Add Stars-->
<div id='stars'></div>

</body>
</html>