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,.........完整代码请登录后点击上方下载按钮下载查看