css实现模拟日全食动画过程代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现模拟日全食动画过程代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        *, *::before, *::after {
          font-family: inherit;
          box-sizing: inherit;
          margin: 0;
          padding: 0;
        }
        
        html {
          box-sizing: border-box;
          font-family: 'Nunito Sans', sans-serif;
          font-size: 62.5%;
        }
        
        html body {
          font-size: 1.6rem;
          margin: 0;
        }
        
        ul {
          list-style: none;
        }
        
        a, a:link, a:visited {
          text-decoration: none;
        }
    </style>



    <style>
        body {
          height: 100vh;
          overflow: hidden;
          background-color: #000;
        }
        
        main {
          width: 100%;
          height: 100%;
          overflow: hidden;
          position: relative;
        }
        main::before {
          content: "";
          position: absolute;
          display: block;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1;
          -webkit-animation: color-switch 20s cubic-bezier(0.3, 0, 0.7, 1) both infinite;
                  animation: color-switch 20s cubic-bezier(0.3, 0, 0.7, 1) both infinite;
          mix-blend-mode: screen;
        }
        main .star-wrapper {
          position: absolute;
          width: 100%;
          height: 100%;
          position: relative;
        }
        main .star-wrapper .star {
          --hue: 0;
          --brightness: 80%;
          position: absolute;
          width: 2px;
          height: 2px;
          border-radius: 2px;
          background-color: hsl(var(--hue), 10%, var(--brightness));
        }
        main .star-wrapper .star:nth-child(1) {
          top: 27.0379218245%;
          left: 11.7007061648%;
          --hue: 43.4771178561deg;
          --brightness: 49.3486688936%;
        }
        main .star-wrapper .star:nth-child(2) {
          top: 74.9172930933%;
          left: 60.4552425443%;
          --hue: 42.0460605679deg;
          --brightness: 34.9476832896%;
        }
        main .star-wrapper .star:nth-child(3) {
          top: 63.6100419614%;
          left: 64.8417546325%;
          --hue: 354.2901129208deg;
          --brightness: 40.978447333%;
        }
        main .star-wrapper .star:nth-child(4) {
          top: 78.1161287865%;
          left: 20.554662663%;
          --hue: 2.0655131902deg;
          --brightness: 66.3884075017%;
        }
        main .star-wrapper .star:nth-child(5) {
          top: 40.7785297859%;
          left: 96.842212369%;
          --hue: 159.0685529112deg;
          --brightness: 59.6160411819%;
        }
        main .star-wrapper .star:nth-child(6) {
          top: 95.8700155474%;
          left: 92.4214493263%;
          --hue: 96.461135313deg;
          --brightness: 11.3341213117%;
        }
        main .star-wrapper .star:nth-child(7) {
          top: 19.3462157884%;
          left: 58.7234457082%;
          --hue: 237.9403949889deg;
          --brightness: 12.3071161292%;
        }
        main .star-wrapper .star:nth-child(8) {
          top: 62.1442258282%;
          left: 92.4204680168%;
          --hue: 260.1664119782deg;
          --brightness: 49.2479630631%;
        }
        main .star-wrapper .star:nth-child(9) {
          top: 7.7121372098%;
          left: 55.0633359575%;
          --hue: 155.1928256768deg;
          --brightness: 49.9062296258%;
        }
        main .star-wrapper .star:nth-child(10) {
          top: 88.8604324639%;
          left: 19.1755944767%;
          --hue: 107.9122904944deg;
          --brightness: 51.180547386%;
        }
        main .star-wrapper .star:nth-child(11) {
          top: 19.2270433549%;
          left: 51.0580568626%;
          --hue: 225.8850463585deg;
          --brightness: 35.7716749576%;
        }
        main .star-wrapper .star:nth-child(12) {
          top: 43.5659383397%;
          left: 63.5450896681%;
          --hue: 341.7739495484deg;
          --brightness: 60.394054837%;
        }
        main .star-wrapper .star:nth-child(13) {
          top: 26.5399708453%;
          left: 99.863278139%;
          --hue: 127.6425462065deg;
          --brightness: 63.3153863464%;
        }
        main .star-wrapper .star:nth-child(14) {
          top: 6.0937113213%;
          left: 41.2528600877%;
          --hue: 337.2415010703deg;
          --brightness: 47.0468718658%;
        }
        main .star-wrapper .star:nth-child(15) {
          top: 20.6525512619%;
          left: 56.4985943364%;
          --hue: 85.1066464328deg;
          --brightness: 44.11819392%;
        }
        main .star-wrapper .star:nth-child(16) {
          top: 24.3612668056%;
          left: 83.6793545478%;
          --hue: 300.5440624949deg;
          --brightness: 20.4352034356%;
        }
        main .star-wrapper .star:nth-child(17) {
          top: 0.061426901%;
          left: 51.3376394149%;
          --hue: 309.368620488deg;
          --brightness: 32.8115670133%;
        }
        main .star-wrapper .star:nth-child(18) {
          top: 28.7871540278%;
          left: 75.4265648236%;
          --hue: 182.5410191096deg;
          --brightness: 65.6530309562%;
        }
        main .star-wrapper .star:nth-child(19) {
          top: 47.3767976605%;
          left: 74.8425850182%;
          --hue: 220.4671247825deg;
          --brightness: 37.5567031317%;
        }
        main .star-wrapper .star:nth-child(20) {
          top: 99.9099734195%;
          left: 18.5382603625%;
          --hue: 75.8605483046deg;
          --brightness: 32.3970269421%;
        }
        main .star-wrapper .star:nth-child(21) {
          top: 72.8343398387%;
          left: 19.4493087173%;
          --hue: 215.3384287583deg;
          --brightness: 44.0611378585%;
        }
        main .star-wrapper .star:nth-child(22) {
          top: 83.6928151497%;
          left: 94.1032485221%;
          --hue: 198.0307817108deg;
          --brightness: 65.754989884%;
        }
        main .star-wrapper .star:nth-child(23) {
          top: 94.218873784%;
          left: 21.2086717729%;
          --hue: 342.1199313875deg;
          --brightness: 28.2134761862%;
        }
        main .star-wrapper .star:nth-child(24) {
          top: 86.0124616233%;
          left: 19.2674917887%;
          --hue: 299.3815709229deg;
          --brightness: 58.160086818%;
        }
        main .star-wrapper .star:nth-child(25) {
          top: 53.8363233767%;
          left: 78.2884944364%;
          --hue: 328.7238403473deg;
          --brightness: 67.3445761114%;
        }
        main .star-wrapper .star:nth-child(26) {
          top: 72.5918697889%;
          left: 44.2316737661%;
          --hue: 298.4327078522deg;
          --brightness: 64.9218080753%;
        }
        main .star-wrapper .star:nth-child(27) {
          top: 54.2892804062%;
          left: 52.3932522872%;
          --hue: 268.9122120098deg;
          --brightness: 62.4709670705%;
        }
        main .star-wrapper .star:nth-child(28) {
          top: 59.363164503%;
          left: 80.6991008738%;
          --hue: 76.7265173592deg;
          --brightness: 49.1571429105%;
        }
        main .star-wrapper .star:nth-child(29) {
          top: 36.8466400062%;
          left: 9.6168604773%;
          --hue: 143.6502797956deg;
          --brightness: 39.1063524017%;
        }
        main .star-wrapper .star:nth-child(30) {
          top: 75.4582567666%;
          left: 71.632086687%;
          --hue: 222.5136526715deg;
          --brightness: 44.8333530995%;
        }
        main .star-wrapper .star:nth-child(31) {
          top: 10.317352408%;
          left: 19.0525508319%;
          --hue: 336.4589394346deg;
          --brightness: 57.9315190862%;
        }
        main .star-wrapper .star:nth-child(32) {
          top: 48.0574389363%;
          left: 58.0850235225%;
          --hue: 297.4082381108deg;
          --brightness: 16.6950608988%;
        }
        main .star-wrapper .star:nth-child(33) {
          top: 82.8824116012%;
          left: 41.9794049418%;
          --hue: 261.3139783369deg;
          --brightness: 40.7676719657%;
        }
        main .star-wrapper .star:nth-child(34) {
          top: 18.5383934618%;
          left: 23.9935268987%;
          --hue: 280.9988523303deg;
          --brightness: 21.1275541903%;
        }
        main .star-wrapper .star:nth-child(35) {
          top: 14.4941090743%;
          left: 54.8688722552%;
          --hue: 68.4746761765deg;
          --brightness: 56.9224390282%;
        }
        main .star-wrapper .star:nth-child(36) {
          top: 35.2791909862%;
          left: 15.200494129%;
          --hue: 177.5056747816deg;
          --brightness: 21.145404336%;
        }
        main .star-wrapper .star:nth-child(37) {
          top: 29.781473071%;
          left: 16.4910706171%;
          --hue: 286.7134099673deg;
          --brightness: 41.6205148934%;
        }
        main .star-wrapper .star:nth-child(38) {
          top: 51.771587128%;
          left: 17.1404779126%;
          --hue: 159.1130963105deg;
          --brightness: 11.0285833102%;
        }
        main .star-wrapper .star:nth-child(39) {
          top: 69.4582890348%;
          left: 50.892273179%;
          --hue: 74.6104299146deg;
          --brightness: 54.5434310649%;
        }
        main .star-wrapper .star:nth-child(40) {
          top: 24.46994725%;
          left: 15.2121295179%;
          --hue: 208.5204454629deg;
          --brightness: 19.1356938788%;
        }
        main .star-wrapper .star:nth-child(41) {
          top: 61.4324716291%;
          left: 91.8519165735%;
          --hue: 150.0156975395deg;
          --brightness: 43.7535553111%;
        }
        main .star-wrapper .star:nth-child(42) {
          top: 50.9980190206%;
          left: 96.8631911945%;
          --hue: 320.0625338859deg;
          --brightness: 63.3137748138%;
        }
        main .star-wrapper .star:nth-child(43) {
          top: 35.485384276%;
          left: 14.271500092%;
          --hue: 84.3720934284deg;
          --brightness: 39.0260033129%;
        }
        main .star-wrapper .star:nth-child(44) {
          top: 52.8120098997%;
          left: 22.907841312%;
          --hue: 120.4953392229deg;
          --brightness: 67.5058717928%;
        }
        main .star-wrapper .star:nth-child(45) {
          top: 79.0312791078%;
          left: 7.2816622054%;
          --hue: 178.1826917878deg;
          --brightness: 24.097163534%;
        }
        main .star-wrapper .star:nth-child(46) {
          top: 35.33059631%;
          left: 33.141679576%;
          --hue: 298.3795246279deg;
          --brightness: 21.9083835803%;
        }
        main .star-wrapper ..........完整代码请登录后点击上方下载按钮下载查看