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

css实现模拟日全食动画过程代码

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