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