css实现一个山间夜晚流星雨划过漫天繁星动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现一个山间夜晚流星雨划过漫天繁星动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        * {
          box-sizing: border-box;
        }
        
        html, body {
          font-family: Helvetica, Arial, sans-serif;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          background-color: #f1f1f1;
        }
        
        .frame {
          position: relative;
          width: 500px;
          height: 300px;
          border: 10px solid white;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
          background-image: radial-gradient(ellipse at bottom, #1F7FC7, #041953);
          overflow: hidden;
          box-shadow: inset 0px 0px 20px 20px rgba(0, 0, 0, 0.1);
        }
        
        .sky {
          width: 1000px;
          height: 1000px;
          border-radius: 50%;
          position: relative;
          top: -50%;
          left: -50%;
          animation: sky-timelapse 300s infinite linear;
        }
        
        .stars-small {
          width: 1px;
          height: 1px;
          background: transparent;
          box-shadow: 308px 979px #FFF, 985px 197px #FFF, 158px 102px #FFF, 984px 534px #FFF, 940px 742px #FFF, 388px 674px #FFF, 90px 343px #FFF, 914px 60px #FFF, 856px 719px #FFF, 119px 553px #FFF, 783px 236px #FFF, 315px 897px #FFF, 38px 440px #FFF, 311px 616px #FFF, 683px 737px #FFF, 909px 577px #FFF, 732px 501px #FFF, 820px 189px #FFF, 82px 42px #FFF, 874px 873px #FFF, 38px 148px #FFF, 706px 317px #FFF, 560px 316px #FFF, 708px 386px #FFF, 153px 58px #FFF, 281px 375px #FFF, 140px 452px #FFF, 386px 369px #FFF, 688px 72px #FFF, 9px 898px #FFF, 884px 110px #FFF, 869px 864px #FFF, 362px 587px #FFF, 840px 179px #FFF, 678px 588px #FFF, 408px 866px #FFF, 406px 287px #FFF, 853px 60px #FFF, 584px 183px #FFF, 276px 457px #FFF, 227px 332px #FFF, 912px 606px #FFF, 934px 709px #FFF, 668px 679px #FFF, 221px 486px #FFF, 958px 645px #FFF, 619px 337px #FFF, 120px 971px #FFF, 843px 143px #FFF, 766px 810px #FFF, 174px 749px #FFF, 530px 172px #FFF, 293px 855px #FFF, 446px 386px #FFF, 640px 404px #FFF, 279px 555px #FFF, 590px 401px #FFF, 63px 275px #FFF, 712px 528px #FFF, 962px 927px #FFF, 177px 241px #FFF, 387px 795px #FFF, 182px 382px #FFF, 240px 249px #FFF, 135px 255px #FFF, 878px 623px #FFF, 591px 561px #FFF, 426px 479px #FFF, 333px 778px #FFF, 974px 306px #FFF, 921px 517px #FFF, 326px 778px #FFF, 861px 651px #FFF, 772px 825px #FFF, 901px 826px #FFF, 27px 944px #FFF, 517px 697px #FFF, 37px 304px #FFF, 69px 337px #FFF, 240px 572px #FFF, 75px 59px #FFF, 118px 148px #FFF, 553px 131px #FFF, 559px 233px #FFF, 541px 943px #FFF, 6px 655px #FFF, 874px 850px #FFF, 596px 379px #FFF, 676px 458px #FFF, 26px 979px #FFF, 892px 429px #FFF, 350px 509px #FFF, 301px 80px #FFF, 505px 448px #FFF, 922px 140px #FFF, 190px 185px #FFF, 782px 92px #FFF, 363px 899px #FFF, 66px 225px #FFF, 981px 19px #FFF, 879px 837px #FFF, 74px 595px #FFF, 143px 127px #FFF, 325px 676px #FFF, 839px 632px #FFF, 919px 632px #FFF, 459px 136px #FFF, 670px 896px #FFF, 311px 112px #FFF, 794px 38px #FFF, 944px 595px #FFF, 861px 56px #FFF, 485px 562px #FFF, 908px 631px #FFF, 637px 169px #FFF, 555px 517px #FFF, 603px 164px #FFF, 742px 15px #FFF, 435px 77px #FFF, 323px 566px #FFF, 466px 323px #FFF, 599px 231px #FFF, 625px 426px #FFF, 30px 496px #FFF, 914px 915px #FFF, 823px 514px #FFF, 701px 411px #FFF, 605px 985px #FFF, 50px 105px #FFF, 853px 972px #FFF, 1000px 232px #FFF, 752px 893px #FFF, 411px 40px #FFF, 290px 37px #FFF, 11px 903px #FFF, 673px 960px #FFF, 703px 581px #FFF, 39px 101px #FFF, 856px 299px #FFF, 182px 828px #FFF, 754px 870px #FFF, 730px 429px #FFF, 565px 982px #FFF, 332px 611px #FFF, 416px 359px #FFF, 886px 516px #FFF, 530px 312px #FFF, 969px 183px #FFF, 853px 434px #FFF, 540px 331px #FFF, 231px 340px #FFF, 807px 600px #FFF, 462px 768px #FFF, 104px 277px #FFF, 475px 709px #FFF, 979px 455px #FFF, 612px 260px #FFF, 958px 241px #FFF, 778px 787px #FFF, 687px 465px #FFF, 781px 555px #FFF, 281px 233px #FFF, 799px 410px #FFF, 8px 146px #FFF, 782px 142px #FFF, 502px 177px #FFF, 941px 301px #FFF, 250px 39px #FFF, 366px 521px #FFF, 199px 275px #FFF, 991px 294px #FFF, 315px 1000px #FFF, 861px 490px #FFF, 3px 567px #FFF, 960px 350px #FFF, 423px 18px #FFF, 313px 221px #FFF, 435px 813px #FFF, 268px 909px #FFF, 768px 629px #FFF, 933px 660px #FFF, 487px 750px #FFF, 832px 362px #FFF, 545px 206px #FFF, 890px 588px #FFF, 483px 338px #FFF, 721px 334px #FFF, 301px 394px #FFF, 909px 647px #FFF, 438px 29px #FFF, 752px 274px #FFF, 621px 425px #FFF, 538px 662px #FFF, 714px 478px #FFF, 655px 794px #FFF, 878px 692px #FFF, 181px 284px #FFF, 737px 183px #FFF, 702px 583px #FFF, 970px 830px #FFF, 562px 491px #FFF, 272px 911px #FFF, 503px 451px #FFF, 160px 126px #FFF, 935px 678px #FFF, 682px 886px #FFF, 414px 773px #FFF, 272px 321px #FFF, 373px 920px #FFF, 496px 93px #FFF, 737px 604px #FFF, 208px 929px #FFF, 713px 246px #FFF, 901px 403px #FFF, 93px 629px #FFF, 683px 426px #FFF, 611px 578px #FFF, 962px 826px #FFF, 651px 834px #FFF, 585px 267px #FFF, 502px 902px #FFF, 869px 989px #FFF, 452px 561px #FFF, 397px 51px #FFF, 433px 661px #FFF, 184px 460px #FFF, 977px 414px #FFF, 948px 501px #FFF, 623px 598px #FFF, 28px 97px #FFF, 722px 963px #FFF, 140px 691px #FFF, 203px 915px #FFF, 476px 553px #FFF, 858px 155px #FFF, 933px 970px #FFF, 330px 185px #FFF, 215px 304px #FFF, 456px 406px #FFF, 981px 734px #FFF, 521px 122px #FFF, 619px 206px #FFF, 788px 98px #FFF, 933px 701px #FFF, 876px 247px #FFF, 418px 65px #FFF, 627px 145px #FFF, 946px 701px #FFF, 948px 315px #FFF, 965px 319px #FFF, 597px 396px #FFF, 148px 991px #FFF, 507px 839px #FFF, 135px 890px #FFF, 229px 347px #FFF, 439px 742px #FFF, 340px 776px #FFF, 71px 427px #FFF, 95px 277px #FFF, 259px 719px #FFF, 128px 958px #FFF, 4px 777px #FFF, 151px 480px #FFF, 750px 202px #FFF, 911px 856px #FFF, 568px 571px #FFF, 479px 521px #FFF, 91px 948px #FFF, 705px 695px #FFF, 143px 648px #FFF, 1px 114px #FFF, 865px 462px #FFF, 113px 926px #FFF, 842px 959px #FFF, 502px 715px #FFF, 706px 424px #FFF, 712px 875px #FFF, 546px 474px #FFF, 990px 995px #FFF, 171px 12px #FFF, 764px 736px #FFF, 5px 366px #FFF, 933px 966px #FFF, 85px 234px #FFF, 252px 182px #FFF, 663px 50px #FFF, 63px 577px #FFF, 744px 100px #FFF, 944px 586px #FFF, 131px 598px #FFF, 952px 50px #FFF, 941px 631px #FFF, 480px 848px #FFF, 691px 695px #FFF, 320px 295px #FFF, 16px 729px #FFF, 327px 462px #FFF, 790px 864px #FFF, 116px 460px #FFF, 138px 917px #FFF, 227px 880px #FFF, 716px 765px #FFF, 458px 607px #FFF, 285px 574px #FFF, 1000px 969px #FFF, 121px 116px #FFF, 177px 366px #FFF, 848px 951px #FFF, 338px 180px #FFF, 724px 918px #FFF, 358px 99px #FFF, 844px 587px #FFF, 951px 582px #FFF, 230px 252px #FFF, 404px 929px #FFF, 722px 235px #FFF, 345px 139px #FFF, 435px 308px #FFF, 342px 147px #FFF, 138px 190px #FFF, 967px 761px #FFF, 489px.........完整代码请登录后点击上方下载按钮下载查看