小白程序员也可以的浪漫-星空特效

 

是动态的 但是没用gif

直接上代码：

style：

 body {
            background-color: rgb(0, 0, 0);
        }

        .animation-stars {
            position: fixed;
        }

        .animation-stars .stars,
        .animation-stars .stars:after {
            width: 1px;
            height: 1px;
            background: transparent;
            -webkit-box-shadow: 1407px 511px #fff, 1611px 119px #fff, 1686px 956px #fff, 1163px 1929px #fff, 912px 1242px #fff, 490px 469px #fff, 869px 425px #fff, 1447px 891px #fff, 422px 1960px #fff, 517px 1995px #fff, 738px 171px #fff, 1328px 1668px #fff, 874px 1490px #fff, 83px 81px #fff, 632px 98px #fff, 1518px 1764px #fff, 636px 596px #fff, 1178px 131px #fff, 278px 1179px #fff, 1898px 1951px #fff, 1787px 326px #fff, 186px 1588px #fff, 552px 1942px #fff, 1929px 1300px #fff, 802px 681px #fff, 430px 1711px #fff, 1192px 308px #fff, 123px 1604px #fff, 880px 169px #fff, 1400px 632px #fff, 500px 1165px #fff, 288px 1208px #fff, 319px 1419px #fff, 1170px 980px #fff, 1608px 784px #fff, 1735px 1276px #fff, 966px 1534px #fff, 654px 783px #fff, 1366px 964px #fff, 1213px 60px #fff, 302px 1509px #fff, 845px 714px #fff, 524px 323px #fff, 1538px 1399px #fff, 394px 619px #fff, 680px 26px #fff, 353px 776px #fff, 1826px 1450px #fff, 1909px 1452px #fff, 1014px 1315px #fff, 1883px 1474px #fff, 766px 1742px #fff, 1693px 658px #fff, 1186px 302px #fff, 376px 1575px #fff, 712px 1739px #fff, 1627px 299px #fff, 482px 224px #fff, 1379px 510px #fff, 1543px 1602px #fff, 45px 606px #fff, 827px 1336px #fff, 224px 1939px #fff, 1098px 1342px #fff, 813px 1553px #fff, 825px 419px #fff, 519px 894px #fff, 1406px 797px #fff, 1341px 274px #fff, 1787px 903px #fff, 1701px 1483px #fff, 1108px 232px #fff, 1599px 1409px #fff, 659px 870px #fff, 1538px 335px #fff, 632px 1855px #fff, 154px 1026px #fff, 1722px 979px #fff, 1339px 509px #fff, 1833px 460px #fff, 315px 65px #fff, 496px 1927px #fff, 1314px 427px #fff, 344px 1046px #fff, 1658px 724px #fff, 1899px 264px #fff, 1200px 1305px #fff, 1562px 339px #fff, 159px 766px #fff, 1639px 1966px #fff, 459px 1898px #fff, 944px 763px #fff, 1174px 1056px #fff, 1825px 790px #fff, 906px 1526px #fff, 1537px 1303px #fff, 79px 1105px #fff, 1318px 672px #fff, 1232px 61px #fff, 709px 1078px #fff, 1010px 1810px #fff, 777px 1160px #fff, 1598px 1428px #fff, 815px 684px #fff, 1003px 943px #fff, 1876px 1003px #fff, 1025px 1529px #fff, 66px 549px #fff, 514px 457px #fff, 262px 1005px #fff, 812px 1705px #fff, 1163px 1087px #fff, 165px 45px #fff, 677px 1462px #fff, 580px 1675px #fff, 1848px 1384px #fff, 449px 862px #fff, 1629px 1979px #fff, 667px 135px #fff, 240px 53px #fff, 1919px 1832px #fff, 696px 1384px #fff, 1630px 361px #fff, 878px 663px #fff, 1226px 1723px #fff, 765px 686px #fff, 576px 1647px #fff, 97px 1602px #fff, 1117px 1049px #fff, 1433px 68px #fff, 1375px 1991px #fff, 1755px 990px #fff, 1483px 801px #fff, 473px 1802px #fff, 822px 768px #fff, 196px 577px #fff, 516px 504px #fff, 623px 981px #fff, 1478px 819px #fff, 126px 384px #fff, 584px 1908px #fff, 1549px 521px #fff, 1866px 1335px #fff, 586px 342px #fff, 1698px 642px #fff, 136px 188px #fff, 1613px 520px #fff, 937px 326px #fff, 1111px 169px #fff, 229px 229px #fff, 1357px 20px #fff, 725px 1305px #fff, 23px 1977px #fff, 426px 1945px #fff, 1628px 1530px #fff, 256px 1295px #fff, 58px 78px #fff, 409px 1145px #fff, 1607px 767px #fff, 212px 144px #fff, 361px 1890px #fff, 1827px 1451px #fff, 1875px 645px #fff, 571px 853px #fff, 1302px 301px #fff, 9px 1344px #fff, 418px 619px #fff, 1941px 90px #fff, 949px 640px #fff, 179px 1783px #fff, 1104px 360px #fff, 1723px 370px #fff, 1122px 1418px #fff, 1374px 508px #fff, 1108px 1089px #fff, 1440px 1743px #fff, 462px 1495px #fff, 1187px 265px #fff, 567px 74px #fff, 557px 542px #fff, 967px 673px #fff, 825px 1971px #fff, 988px 1260px #fff, 710px 1206px #fff, 538px 1805px #fff, 137px 861px #fff, 1922px 1313px #fff, 481px 470px #fff, 1224px 316px #fff, 1979px 239px #fff, 22px 1155px #fff, 1640px 186px #fff, 592px 1709px #fff, 765px 170px #fff, 129px 1750px #fff, 788px 719px #fff, 181px 1327px #fff, 433px 1455px #fff, 141px 450px #fff, 1287px 1027px #fff, 1278px 1462px #fff;
            box-shadow: 1407px 511px #fff, 1611px 119px #fff, 1686px 956px #fff, 1163px 1929px #fff, 912px 1242px #fff, 490px 469px #fff, 869px 425px #fff, 1447px 891px #fff, 422px 1960px #fff, 517px 1995px #fff, 738px 171px #fff, 1328px 1668px #fff, 874px 1490px #fff, 83px 81px #fff, 632px 98px #fff, 1518px 1764px #fff, 636px 596px #fff, 1178px 131px #fff, 278px 1179px #fff, 1898px 1951px #fff, 1787px 326px #fff, 186px 1588px #fff, 552px 1942px #fff, 1929px 1300px #fff, 802px 681px #fff, 430px 1711px #fff, 1192px 308px #fff, 123px 1604px #fff, 880px 169px #fff, 1400px 632px #fff, 500px 1165px #fff, 288px 1208px #fff, 319px 1419px #fff, 1170px 980px #fff, 1608px 784px #fff, 1735px 1276px #fff, 966px 1534px #fff, 654px 783px #fff, 1366px 964px #fff, 1213px 60px #fff, 302px 1509px #fff, 845px 714px #fff, 524px 323px #fff, 1538px 1399px #fff, 394px 619px #fff, 680px 26px #fff, 353px 776px #fff, 1826px 1450px #fff, 1909px 1452px #fff, 1014px 1315px #fff, 1883px 1474px #fff, 766px 1742px #fff, 1693px 658px #fff, 1186px 302px #fff, 376px 1575px #fff, 712px 1739px #fff, 1627px 299px #fff, 482px 224px #fff, 1379px 510px #fff, 1543px 1602px #fff, 45px 606px #fff, 827px 1336px #fff, 224px 1939px #fff, 1098px 1342px #fff, 813px 1553px #fff, 825px 419px #fff, 519px 894px #fff, 1406px 797px #fff, 1341px 274px #fff, 1787px 903px #fff, 1701px 1483px #fff, 1108px 232px #fff, 1599px 1409px #fff, 659px 870px #fff, 1538px 335px #fff, 632px 1855px #fff, 154px 1026px #fff, 1722px 979px #fff, 1339px 509px #fff, 1833px 460px #fff, 315px 65px #fff, 496px 1927px #fff, 1314px 427px #fff, 344px 1046px #fff, 1658px 724px #fff, 1899px 264px #fff, 1200px 1305px #fff, 1562px 339px #fff, 159px 766px #fff, 1639px 1966px #fff, 459px 1898px #fff, 944px 763px #fff, 1174px 1056px #fff, 1825px 790px #fff, 906px 1526px #fff, 1537px 1303px #fff, 79px 1105px #fff, 1318px 672px #fff, 1232px 61px #fff, 709px 1078px #fff, 1010px 1810px #fff, 777px 1160px #fff, 1598px 1428px #fff, 815px 684px #fff, 1003px 943px #fff, 1876px 1003px #fff, 1025px 1529px #fff, 66px 549px #fff, 514px 457px #fff, 262px 1005px #fff, 812px 1705px #fff, 1163px 1087px #fff, 165px 45px #fff, 677px 1462px #fff, 580px 1675px #fff, 1848px 1384px #fff, 449px 862px #fff, 1629px 1979px #fff, 667px 135px #fff, 240px 53px #fff, 1919px 1832px #fff, 696px 1384px #fff, 1630px 361px #fff, 878px 663px #fff, 1226px 1723px #fff, 765px 686px #fff, 576px 1647px #fff, 97px 1602px #fff, 1117px 1049px #fff, 1433px 68px #fff, 1375px 1991px #fff, 1755px 990px #fff, 1483px 801px #fff, 473px 1802px #fff, 822px 768px #fff, 196px 577px #fff, 516px 504px #fff, 623px 981px #fff, 1478px 819px #fff, 126px 384px #fff, 584px 1908px #fff, 1549px 521px #fff, 1866px 1335px #fff, 586px 342px #fff, 1698px 642px #fff, 136px 188px #fff, 1613px 520px #fff, 937px 326px #fff, 1111px 169px #fff, 229px 229px #fff, 1357px 20px #fff, 725px 1305px #fff, 23px 1977px #fff, 426px 1945px #fff, 1628px 1530px #fff, 256px 1295px #fff, 58px 78px #fff, 409px 1145px #fff, 1607px 767px #fff, 212px 144px #fff, 361px 1890px #fff, 1827px 1451px #fff, 1875px 645px #fff, 571px 853px #fff, 1302px 301px #fff, 9px 1344px #fff, 418px 619px #fff, 1941px 90px #fff, 949px 640px #fff, 179px 1783px #fff, 1104px 360px #fff, 1723px 370px #fff, 1122px 1418px #fff, 1374px 508px #fff, 1108px 1089px #fff, 1440px 1743px #fff, 462px 1495px #fff, 1187px 265px #fff, 567px 74px #fff, 557px 542px #fff, 967px 673px #fff, 825px 1971px #fff, 988px 1260px #fff, 710px 1206px #fff, 538px 1805px #fff, 137px 861px #fff, 1922px 1313px #fff, 481px 470px #fff, 1224px 316px #fff, 1979px 239px #fff, 22px 1155px #fff, 1640px 186px #fff, 592px 1709px #fff, 765px 170px #fff, 129px 1750px #fff, 788px 719px #fff, 181px 1327px #fff, 433px 1455px #fff, 141px 450px #fff, 1287px 1027px #fff, 1278px 1462px #fff;
        }

        .animation-stars .stars {
            -webkit-animation: anim-star 50s linear infinite;
            animation: anim-star 50s linear infinite;
        }

        .animation-stars .stars:after {
            content: " ";
            position: absolute;
            top: 2000px;
        }

        /* 星星动画动作 */
        @keyframes anim-star {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            to {
                -webkit-transform: translateY(-2000px);
                transform: translateY(-2000px)
            }
        }

body：

<body>

        <div class="animation-stars">
            <div class="stars"></div>
        </div>
    </body>