javascript - 使用 CSS 在背景中添加移动元素
问题描述
我是 CSS 新手，正在尝试向我的模板添加有趣的元素。我找到了这样的解决方案。我正在尝试将它们添加到我的背景照片中。但我仍然无法正确调整它。不显示浮动项目。
效果是试图只添加到扩展到整个屏幕的主要部分，它看起来像这样：
#stars {
width: 1px;
height: 1px;
background: transparent;
box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF , 1467px 950px #FFF , 1336px 430px #FFF , 1239px 1577px #FFF , 194px 563px #FFF , 1147px 1182px #FFF , 1749px 770px #FFF , 781px 1261px #FFF , 134px 4px #FFF , 1227px 1601px #FFF , 1377px 1518px #FFF , 905px 1283px #FFF , 636px 267px #FFF , 215px 653px #FFF , 361px 1138px #FFF , 383px 1213px #FFF , 333px 1180px #FFF , 691px 1052px #FFF , 225px 565px #FFF , 1301px 438px #FFF , 121px 1568px #FFF , 1293px 590px #FFF , 72px 977px #FFF , 912px 1305px #FFF , 333px 1070px #FFF , 151px 1593px #FFF , 1832px 839px #FFF , 126px 490px #FFF , 432px 1973px #FFF , 1857px 1288px #FFF , 1779px 297px #FFF , 1218px 391px #FFF , 508px 595px #FFF , 1920px 845px #FFF , 454px 1847px #FFF , 1500px 1503px #FFF , 154px 33px #FFF , 1611px 1368px #FFF , 786px 862px #FFF , 290px 1695px #FFF , 434px 5px #FFF , 559px 1699px #FFF , 469px 1148px #FFF , 539px 1227px #FFF , 400px 743px #FFF , 753px 1002px #FFF , 1623px 1359px #FFF , 177px 575px #FFF , 1667px 1914px #FFF , 842px 642px #FFF , 317px 1943px #FFF , 620px 1040px #FFF , 134px 1489px #FFF , 1152px 1326px #FFF , 1603px 487px #FFF , 936px 1027px #FFF , 623px 1295px #FFF , 1360px 1586px #FFF , 665px 715px #FFF , 1158px 45px #FFF , 487px 1715px #FFF , 1063px 309px #FFF , 1318px 1008px #FFF , 928px 396px #FFF , 80px 1989px #FFF , 1095px 581px #FFF , 1510px 546px #FFF , 1389px 999px #FFF , 1990px 399px #FFF , 749px 620px #FFF , 335px 59px #FFF , 1465px 1626px #FFF , 42px 1499px #FFF , 1288px 1666px #FFF , 1086px 293px #FFF , 635px 188px #FFF , 1333px 1468px #FFF , 668px 834px #FFF , 1862px 100px #FFF , 566px 9px #FFF , 1504px 1805px #FFF , 1555px 1527px #FFF , 713px 1593px #FFF , 625px 262px #FFF , 1354px 230px #FFF , 215px 137px #FFF , 1715px 544px #FFF , 1454px 1450px #FFF , 515px 1417px #FFF , 89px 967px #FFF , 1793px 1939px #FFF , 1273px 1859px #FFF , 1217px 545px #FFF , 607px 128px #FFF , 1637px 989px #FFF , 450px 19px #FFF , 1208px 989px #FFF , 1863px 1888px #FFF , 818px 48px #FFF , 852px 732px #FFF , 1694px 711px #FFF , 1618px 915px #FFF , 1017px 1899px #FFF , 1434px 1773px #FFF , 1715px 1404px #FFF , 52px 53px #FFF , 58px 1259px #FFF , 412px 412px #FFF , 255px 26px #FFF , 1685px 1385px #FFF , 1339px 1362px #FFF , 1722px 1793px #FFF , 276px 1610px #FFF , 659px 758px #FFF , 512px 1265px #FFF , 805px 1229px #FFF , 447px 775px #FFF , 1290px 330px #FFF , 333px 817px #FFF , 1490px 559px #FFF , 1920px 1513px #FFF , 135px 267px #FFF , 296px 328px #FFF , 969px 1630px #FFF , 1242px 73px #FFF , 287px 1974px #FFF , 902px 662px #FFF , 176px 1040px #FFF , 1949px 1290px #FFF , 1499px 740px #FFF , 1124px 913px #FFF , 881px 1907px #FFF , 1000px 664px #FFF , 1476px 1442px #FFF , 736px 167px #FFF , 513px 1128px #FFF , 660px 377px #FFF , 1130px 1540px #FFF , 733px 537px #FFF , 302px 682px #FFF , 905px 99px #FFF , 280px 974px #FFF , 1904px 1086px #FFF , 1547px 663px #FFF , 438px 976px #FFF , 1514px 1713px #FFF , 1987px 71px #FFF , 1567px 939px #FFF , 451px 1396px #FFF , 872px 460px #FFF , 1558px 881px #FFF , 922px 156px #FFF , 1614px 326px #FFF , 1524px 1036px #FFF , 734px 507px #FFF , 501px 810px #FFF , 1238px 384px #FFF , 1160px 1130px #FFF , 1859px 1010px #FFF , 787px 820px #FFF , 1363px 1953px #FFF , 32px 737px #FFF , 610px 510px #FFF , 200px 470px #FFF , 1725px 556px #FFF , 1266px 604px #FFF , 853px 430px #FFF , 1166px 1872px #FFF , 866px 276px #FFF , 559px 1302px #FFF , 1110px 406px #FFF , 634px 187px #FFF , 1772px 872px #FFF , 1293px 1235px #FFF , 334px 750px #FFF , 82px 1737px #FFF , 846px 1828px #FFF , 374px 1524px #FFF , 611px 166px #FFF , 1051px 709px #FFF , 356px 1195px #FFF , 1352px 301px #FFF , 122px 1930px #FFF , 1331px 80px #FFF , 334px 1507px #FFF , 1169px 1509px #FFF , 273px 1704px #FFF , 976px 364px #FFF , 1586px 1204px #FFF , 500px 246px #FFF , 1934px 1171px #FFF , 581px 413px #FFF , 1308px 665px #FFF , 1946px 1576px #FFF , 1403px 1775px #FFF , 1625px 81px #FFF , 883px 1421px #FFF , 331px 479px #FFF , 1740px 526px #FFF , 1456px 1518px #FFF , 1205px 1976px #FFF , 1239px 1547px #FFF , 1746px 1621px #FFF , 174px 1228px #FFF , 434px 512px #FFF , 1019px 1700px #FFF , 577px 1459px #FFF , 247px 1594px #FFF , 338px 187px #FFF , 1251px 5px #FFF , 1440px 1410px #FFF , 883px 1238px #FFF , 372px 1728px #FFF , 1598px 1960px #FFF , 1871px 1524px #FFF , 1501px 1656px #FFF , 1053px 1655px #FFF , 1246px 1145px #FFF , 545px 1929px #FFF , 881px 1681px #FFF , 1003px 934px #FFF , 186px 29px #FFF , 1108px 766px #FFF , 685px 1099px #FFF , 865px 1391px #FFF , 191px 881px #FFF , 1112px 1565px #FFF , 1354px 1479px #FFF , 1546px 131px #FFF , 869px 487px #FFF , 883px 840px #FFF , 1915px 1843px #FFF , 121px 1446px #FFF , 301px 270px #FFF , 179px 806px #FFF , 972px 617px #FFF , 1311px 1174px #FFF , 577px 357px #FFF , 826px 540px #FFF , 91px 879px #FFF , 1696px 413px #FFF , 1945px 726px #FFF , 200px 1134px #FFF , 965px 241px #FFF , 1968px 1932px #FFF , 185px 1438px #FFF , 980px 1160px #FFF , 1097px 1753px #FFF , 666px 1639px #FFF , 1320px 210px #FFF , 1833px 1049px #FFF , 1967px 1214px #FFF , 1397px 672px #FFF , 1825px 1054px #FFF;
animation: animStar 50s linear infinite;
}
#stars:after {
content: " ";
position: absolute;
top: 2000px;
width: 1px;
height: 1px;
background: transparent;
box-shadow: 1971px 456px #FFF , 1577px 1437px #FFF , 476px 393px #FFF , 803px 1228px #FFF , 7px 1062px #FFF , 1700px 1956px #FFF , 338px 1912px #FFF , 1336px 88px #FFF , 1015px 1865px #FFF , 592px 1019px #FFF , 1311px 1452px #FFF , 555px 1351px #FFF , 860px 661px #FFF , 588px 1593px #FFF , 618px 1711px #FFF , 226px 1186px #FFF , 1719px 1774px #FFF , 1382px 346px #FFF , 399px 738px #FFF , 1746px 1062px #FFF , 204px 895px #FFF , 1008px 217px #FFF , 911px 1350px #FFF , 962px 788px #FFF , 660px 85px #FFF , 1682px 911px #FFF , 1707px 1875px #FFF , 397px 751px #FFF , 1384px 551px #FFF , 764px 77px #FFF , 1133px 16px #FFF , 1305px 630px #FFF , 1366px 1973px #FFF , 1212px 754px #FFF , 1265px 1663px #FFF , 478px 416px #FFF , 540px 549px #FFF , 691px 1775px #FFF , 478px 11px #FFF , 748px 971px #FFF , 1264px 139px #FFF , 1875px 1032px #FFF , 406px 1696px #FFF , 1109px 107px #FFF , 846px 1611px #FFF , 849px 679px #FFF , 1322px 1004px #FFF , 1543px 652px #FFF , 1830px 1347px #FFF , 688px 1066px #FFF , 1140px 1691px #FFF , 471px 401px #FFF , 460px 1665px #FFF , 1560px 32px #FFF , 1413px 1384px #FFF , 1487px 1900px #FFF , 1154px 265px #FFF , 182px 199px #FFF , 765px 82px #FFF , 915px 1414px #FFF , 1812px 1724px #FFF , 113px 58px #FFF , 1312px 1790px #FFF , 714px 475px #FFF , 1766px 163px #FFF , 1312px 1149px #FFF , 828px 1303px #FFF , 1398px 573px #FFF , 1595px 867px #FFF , 1193px 1775px #FFF , 397px 815px #FFF , 1786px 895px #FFF , 1831px 444px #FFF , 980px 768px #FFF , 1456px 159px #FFF , 1240px 968px #FFF , 1894px 384px #FFF , 410px 1472px #FFF , 384px 659px #FFF , 569px 279px #FFF , 1339px 85px #FFF , 570px 1521px #FFF , 790px 1537px #FFF , 210px 334px #FFF , 1067px 1533px #FFF , 850px 1549px #FFF , 139px 923px #FFF , 1590px 1122px #FFF , 1603px 1528px #FFF , 348px 1030px #FFF , 360px 185px #FFF , 1405px 1176px #FFF , 299px 908px #FFF , 32px 595px #FFF , 1041px 1102px #FFF , 1674px 866px #FFF , 244px 1386px #FFF , 600px 1288px #FFF , 739px 1653px #FFF , 500px 953px #FFF , 1050px 843px #FFF , 584px 1005px #FFF , 1883px 1018px #FFF , 1414px 1979px #FFF , 1316px 229px #FFF , 1358px 1862px #FFF , 1645px 452px #FFF , 554px 1108px #FFF , 1217px 1134px #FFF , 1473px 1265px #FFF , 902px 130px #FFF , 595px 79px #FFF , 1023px 1240px #FFF , 294px 203px #FFF , 620px 1414px #FFF , 213px 460px #FFF , 1999px 1780px #FFF , 1654px 1829px #FFF , 1630px 1636px #FFF , 143px 1117px #FFF , 341px 450px #FFF , 856px 544px #FFF , 1598px 1550px #FFF , 1897px 1093px #FFF , 1428px 542px #FFF , 195px 1328px #FFF , 1169px 1743px #FFF , 879px 618px #FFF , 660px 1447px #FFF , 1700px 479px #FFF , 1436px 1990px #FFF , 1286px 1496px #FFF , 879px 1114px #FFF , 291px 1942px #FFF , 569px 1302px #FFF , 762px 1432px #FFF , 1547px 1432px #FFF , 366px 1288px #FFF , 82px 1840px #FFF , 17px 1413px #FFF , 667px 121px #FFF , 1840px 295px #FFF , 489px 1707px #FFF , 1628px 1525px #FFF , 138px 537px #FFF , 1596px 1410px #FFF , 644px 977px #FFF , 694px 1223px #FFF , 132px 1825px #FFF , 379px 1316px #FFF , 1687px 1832px #FFF , 1856px 1084px #FFF , 693px 920px #FFF , 1772px 167px #FFF , 1740px 1037px #FFF , 1339px 1763px #FFF , 1768px 382px #FFF , 1265px 1171px #FFF , 174px 983px #FFF , 404px 456px #FFF , 980px 618px #FFF , 1654px 1167px #FFF , 1570px 1042px #FFF , 128px 1630px #FFF , 152px 734px #FFF , 203px 886px #FFF , 1820px 191px #FFF , 1581px 10px #FFF , 276px 1374px #FFF , 1398px 106px #FFF , 1712px 362px #FFF , 1717px 1465px #FFF , 1206px 748px #FFF , 1077px 1363px #FFF , 136px 802px #FFF , 1968px 380px #FFF , 1081px 729px #FFF , 1164px 574px #FFF , 551px 9px #FFF , 511px 1727px #FFF , 981px 1755px #FFF , 879px 917px #FFF , 1317px 165px #FFF , 1331px 685px #FFF , 1125px 1274px #FFF , 825px 1033px #FFF , 246px 1750px #FFF , 1619px 1504px #FFF , 25px 255px #FFF , 314px 774px #FFF , 810px 1304px #FFF , 1210px 930px #FFF , 117px 722px #FFF , 218px 382px #FFF , 779px 200px #FFF , 1275px 772px #FFF , 651px 1646px #FFF , 753px 1930px #FFF , 362px 967px #FFF , 1416px 1474px #FFF , 1400px 944px #FFF , 1742px 1047px #FFF , 1113px 1022px #FFF , 1497px 1722px #FFF , 637px 1606px #FFF , 242px 385px #FFF , 322px 1995px #FFF , 109px 1162px #FFF , 694px 995px #FFF , 1206px 483px #FFF , 17px 998px #FFF , 1862px 1148px #FFF , 1061px 322px #FFF , 29px 49px #FFF , 1799px 1692px #FFF , 822px 1996px #FFF , 490px 862px #FFF , 1046px 521px #FFF , 2px 565px #FFF , 1393px 412px #FFF , 354px 1627px #FFF , 1134px 421px #FFF , 1726px 540px #FFF , 413px 1303px #FFF , 891px 1376px #FFF , 135px 1196px #FFF , 935px 1712px #FFF , 1217px 1260px #FFF , 1640px 998px #FFF , 1870px 465px #FFF , 1887px 599px #FFF , 1396px 548px #FFF , 944px 1836px #FFF , 1012px 533px #FFF , 1116px 1229px #FFF , 349px 411px #FFF , 78px 191px #FFF , 1864px 1586px #FFF , 1798px 537px #FFF , 1850px 527px #FFF , 1809px 591px #FFF , 1541px 468px #FFF , 594px 1415px #FFF , 1188px 848px #FFF , 780px 443px #FFF , 1413px 1961px #FFF , 1367px 1859px #FFF , 1822px 1231px #FFF , 932px 562px #FFF , 1101px 292px #FFF , 1072px 987px #FFF , 411px 1745px #FFF , 621px 1092px #FFF , 447px 1326px #FFF , 1186px 1087px #FFF , 137px 591px #FFF , 829px 1006px #FFF , 107px 1524px #FFF , 1880px 229px #FFF , 573px 24px #FFF;
}
#stars2 {
width: 2px;
height: 2px;
background: transparent;
box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF , 1840px 1528px #FFF , 1833px 43px #FFF , 1509px 1720px #FFF , 770px 1195px #FFF , 1315px 173px #FFF , 655px 639px #FFF , 820px 914px #FFF , 1109px 1901px #FFF , 1338px 1852px #FFF , 260px 386px #FFF , 228px 837px #FFF , 460px 1381px #FFF , 637px 650px #FFF , 450px 669px #FFF , 1189px 1002px #FFF , 1240px 1631px #FFF , 1285px 94px #FFF , 402px 449px #FFF , 1497px 466px #FFF , 494px 1879px #FFF , 262px 1224px #FFF , 1155px 393px #FFF , 459px 1501px #FFF , 515px 136px #FFF , 1082px 543px #FFF , 1902px 1935px #FFF , 1491px 1789px #FFF , 1553px 975px #FFF , 561px 412px #FFF , 456px 1767px #FFF , 1089px 1146px #FFF , 714px 314px #FFF , 718px 116px #FFF , 1420px 1122px #FFF , 424px 1259px #FFF , 388px 997px #FFF , 535px 1096px #FFF , 1394px 1853px #FFF , 1473px 393px #FFF , 315px 1612px #FFF , 1220px 1808px #FFF , 1955px 1016px #FFF , 1432px 1779px #FFF , 562px 759px #FFF , 869px 37px #FFF , 548px 673px #FFF , 1759px 569px #FFF , 293px 1666px #FFF , 1713px 78px #FFF , 865px 309px #FFF , 1845px 1329px #FFF , 545px 1693px #FFF , 1322px 1852px #FFF , 690px 926px #FFF , 226px 1023px #FFF , 498px 1143px #FFF , 1419px 1630px #FFF , 330px 111px #FFF , 1789px 67px #FFF , 1788px 570px #FFF , 776px 930px #FFF , 1191px 835px #FFF , 1502px 529px #FFF , 637px 245px #FFF , 1135px 215px #FFF , 42px 690px #FFF , 1991px 1650px #FFF , 621px 230px #FFF;
animation: animStar 100s linear infinite;
}
#stars2:after {
content: " ";
position: absolute;
top: 2000px;
width: 2px;
height: 2px;
background: transparent;
box-shadow: 103px 593px #FFF , 1142px 470px #FFF , 1758px 274px #FFF , 610px 389px #FFF , 1236px 296px #FFF , 84px 1643px #FFF , 987px 1271px #FFF , 58px 1864px #FFF , 1888px 1759px #FFF , 1936px 1193px #FFF , 1431px 872px #FFF , 1189px 1570px #FFF , 1520px 1526px #FFF , 1104px 457px #FFF , 1314px 40px #FFF , 869px 1860px #FFF , 862px 545px #FFF , 916px 1496px #FFF , 105px 242px #FFF , 251px 1319px #FFF , 1095px 1930px #FFF , 393px 516px #FFF , 1857px 1579px #FFF , 1847px 1733px #FFF , 1707px 458px #FFF , 1024px 221px #FFF , 880px 759px #FFF , 1933px 588px #FFF , 1356px 368px #FFF , 443px 622px #FFF , 12px 986px #FFF , 646px 172px #FFF , 900px 905px #FFF , 1417px 1330px #FFF , 936px 1051px #FFF , 808px 572px #FFF , 1986px 371px #FFF , 1310px 937px #FFF , 1114px 1937px #FFF , 1720px 507px #FFF , 933px 1928px #FFF , 1543px 852px #FFF , 476px 1461px #FFF , 424px 698px #FFF , 1915px 1522px #FFF , 1418px 1011px #FFF , 1768px 1656px #FFF , 381px 141px #FFF , 789px 865px #FFF , 633px 12px #FFF , 196px 633px #FFF , 965px 432px #FFF , 1522px 491px #FFF , 1377px 1231px #FFF , 686px 259px #FFF , 1625px 1449px #FFF , 1516px 1780px #FFF , 998px 423px #FFF , 1511px 1905px #FFF , 418px 50px #FFF , 704px 614px #FFF , 427px 1422px #FFF , 795px 1421px #FFF , 231px 541px #FFF , 452px 1701px #FFF , 545px 913px #FFF , 1071px 1201px #FFF , 1768px 604px #FFF , 361px 1854px #FFF , 150px 1041px #FFF , 1392px 711px #FFF , 1722px 401px #FFF , 366px 737px #FFF , 1814px 1466px #FFF , 1675px 292px #FFF , 1202px 625px #FFF , 383px 492px #FFF , 1656px 554px #FFF , 593px 1419px #FFF , 249px 1573px #FFF , 1794px 1220px #FFF , 11px 201px #FFF , 806px 978px #FFF , 1967px 454px #FFF , 753px 1451px #FFF , 723px 934px #FFF , 1310px 908px #FFF , 188px 687px #FFF , 88px 323px #FFF , 1361px 1098px #FFF , 793px 1339px #FFF , 972px 1475px #FFF , 1608px 1323px #FFF , 85px 71px #FFF , 1615px 1877px #FFF , 919px 1436px #FFF , 1262px 1002px #FFF , 1367px 371px #FFF , 701px 1588px #FFF , 906px 289px #FFF , 647px 1172px #FFF , 411px 1206px #FFF , 1044px 1419px #FFF , 252px 505px #FFF , 236px 962px #FFF , 655px 761px #FFF , 831px 643px #FFF , 1262px 595px #FFF , 649px 997px #FFF , 368px 350px #FFF , 366px 1992px #FFF , 38px 971px #FFF , 648px 1670px #FFF , 97px 736px #FFF , 1933px 478px #FFF , 1109px 779px #FFF , 1792px 987px #FFF , 1959px 1205px #FFF , 1908px 679px #FFF , 39px 1460px #FFF , 820px 1190px #FFF , 1574px 426px #FFF , 578px 951px #FFF , 732px 771px #FFF , 17px 913px #FFF , 650px 1034px #FFF , 1981px 204px #FFF , 953px 1683px #FFF , 1787px 1036px #FFF , 1311px 1381px #FFF , 1932px 66px #FFF , 353px 1852px #FFF;
}
#stars3 {
width: 3px;
height: 3px;
background: transparent;
box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF;
animation: animStar 150s linear infinite;
}
#stars3:after {
content: " ";
position: absolute;
top: 2000px;
width: 3px;
height: 3px;
background: transparent;
box-shadow: 667px 320px #FFF , 178px 1273px #FFF , 1245px 1230px #FFF , 465px 859px #FFF , 821px 965px #FFF , 250px 1151px #FFF , 500px 1601px #FFF , 1900px 1707px #FFF , 1175px 1409px #FFF , 1534px 910px #FFF , 413px 756px #FFF , 689px 1341px #FFF , 1408px 860px #FFF , 1625px 1180px #FFF , 1871px 1199px #FFF , 1578px 1986px #FFF , 743px 62px #FFF , 275px 160px #FFF , 1624px 881px #FFF , 1256px 993px #FFF , 406px 1538px #FFF , 1511px 154px #FFF , 1153px 297px #FFF , 43px 785px #FFF , 909px 1392px #FFF , 89px 684px #FFF , 777px 1732px #FFF , 1110px 913px #FFF , 95px 1077px #FFF , 1807px 776px #FFF , 17px 622px #FFF , 1615px 459px #FFF , 705px 1635px #FFF , 700px 1776px #FFF , 1441px 1705px #FFF , 1170px 378px #FFF , 824px 1799px #FFF , 960px 518px #FFF , 1566px 1994px #FFF , 853px 1419px #FFF , 1177px 901px #FFF , 1642px 1902px #FFF , 1736px 778px #FFF , 297px 1864px #FFF , 46px 1927px #FFF , 1302px 870px #FFF , 1472px 1079px #FFF , 1139px 1005px #FFF , 1825px 601px #FFF , 597px 1703px #FFF , 1159px 689px #FFF , 356px 1048px #FFF , 1498px 843px #FFF , 696px 960px #FFF , 289px 1542px #FFF , 736px 208px #FFF , 68px 1499px #FFF , 489px 1687px #FFF , 1309px 964px #FFF , 732px 132px #FFF , 1806px 951px #FFF , 744px 1969px #FFF , 1980px 1214px #FFF , 2000px 1622px #FFF , 1213px 1236px #FFF , 782px 1100px #FFF , 1765px 875px #FFF , 652px 875px #FFF , 966px 1469px #FFF , 785px 416px #FFF , 48px 1365px #FFF , 813px 774px #FFF , 1056px 1958px #FFF , 270px 258px #FFF , 1940px 1847px #FFF , 1671px 1647px #FFF , 1500px 1606px #FFF , 1693px 1711px #FFF , 1408px 812px #FFF , 1050px 562px #FFF , 558px 909px #FFF , 23px 430px #FFF , 1582px 1657px #FFF , 1984px 779px #FFF , 652px 1133px #FFF , 1541px 551px #FFF , 1194px 700px #FFF , 1758px 23px #FFF , 403px 1986px #FFF , 829px 567px #FFF , 787px 926px #FFF , 443px 1214px #FFF , 149px 159px #FFF , 506px 1388px #FFF , 503px 422px #FFF , 1463px 419px #FFF , 1329px 1238px #FFF , 1025px 1264px #FFF , 1868px 275px #FFF , 209px 330px #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);
}
} <div id="stars">
<div id="stars2">
<div id="stars3">
<section class="spotlight bg-cover bg-size--cover" data-spotlight="fullscreen" style="background-image: url('{% static 'assets/img/backgrounds/2.jpg' %}');">
[...content and title section...]
</section>
</div>
</div>
</div>如何在照片的背景中添加移动的星星？
解决方案
使用particles.js完全自定义和更多功能。
/* ---- particles.js config ---- */
particlesJS("particle-container", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "random"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});/* Reset. */
body {
margin: 0;
background: #ecf3f3;
}
canvas {
display: block;
vertical-align: bottom;
}
/* Particle container. */
#particle-container {
position: absolute;
width: 100%;
height: 100%;
}<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="particle-container"></div>推荐阅读
- kubernetes-ingress - 如何在 kuberenetes 入口中永久设置 nginx.conf？
- android - material-1.3.0\res\values\values.xml:3523:23：AAPT：错误：资源“attr/iconSize”与配置“”的重复值
- c# - 如何在发送前重命名文件
- ios - Disclosure Indicator 背景后面的 Swift UITableViewCell 视图在明亮模式下没有变化
- winapi - 卸载 UWP 应用时显示 toast 通知
- windows - Windows 10 中的 setx 删除了反斜杠
- python - 如何限制对角色高于他们的用户详细信息页面的访问？
- winapi - 使用来自 win32 的蓝牙 LE
- flutter - 能否添加可在 Flutter 应用上自定义的 3D 头像？
- flutter - 颤振错误：任务'：location_permissions：compileDebugJavaWithJavac'执行失败