css+js模拟地球绕太阳公转旋转及自转产生的春夏秋冬四季及昼夜循环动画效果代码-html代码-BFW代码库

css+js模拟地球绕太阳公转旋转及自转产生的春夏秋冬四季及昼夜循环动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js模拟地球绕太阳公转旋转及自转产生的春夏秋冬四季及昼夜循环动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
          margin: 0;
          color: #fff;
          font-size: 16px;
          font-family: "Times New Roman";
          font-weight: 100;
          font-style: italic;
          background: #222;
        }
        
        h1 {
          margin-top: 5vh;
          color: #fff;
          text-align: center;
          font-size: 32px;
          font-style: normal;
          font-weight: 100;
          letter-spacing: 2px;
        }
        h1 i {
          font-size: 14px;
          vertical-align: 35%;
        }
        h1 b {
          font-family: Helvetica;
        }
        h1 span {
          display: inline-block;
          border-bottom: 1px solid #fff8;
          height: 33px;
          padding: 0 6px;
        }
        
        .earth-container {
          position: relative;
          margin: 80px 0 120px calc(50% - 190px);
          height: 380px;
          background: linear-gradient(90deg, #222 190px, #0000 190px), linear-gradient(#0000 0, #111 0.5%, #111 98.5%, #0000 100%);
          cursor: pointer;
        }
        @keyframes rotate {
          from {
            background-position: 0 0;
          }
          to {
            background-position: 950px 0;
          }
        }
        .earth-container .globe {
          position: absolute;
          width: 380px;
          height: 100%;
          border-radius: 100%;
          background: url("//repo.bfw.wiki/bfwrepo/image/6143c005b4755.png") 0 0/250% 100%, #008;
          animation: rotate 40s infinite linear;
          transform: rotate(calc(-23.4deg * var(--ang)));
        }
        .earth-container .globe:before, .earth-container .globe:after {
          content: "";
          position: absolute;
          inset: 100% 50% -80px;
          width: 1px;
          border-left: 2px solid #fff8;
        }
        .earth-container .globe:after {
          inset: -40px 50% 100%;
        }
        .earth-container .day-label {
          position: absolute;
          left: 0;
          z-index: 10;
          width: 50px;
          text-align: right;
          color: #fff;
          pointer-events: none;
        }
        .earth-container .day-label:after {
          content: "";
          position: absolute;
          inset: 50% -258.4px 50% 145%;
          border-bottom: 2px dotted #fff;
          border-top: 2px dotted #383977;
          z-index: 10;
        }
        .earth-container .day-label.north-label {
          top: 8%;
        }
        .earth-container .day-label.south-label {
          bottom: 10%;
        }
        .earth-container .shadow {
          position: absolute;
          width: 380px;
          height: 100%;
          z-index: 20;
          pointer-events: none;
        }
        .earth-container .shadow:before {
          content: "";
          position: absolute;
          inset: -200px 0;
          clip-path: circle(191px);
          box-shadow: inset -180px 0 20px 0 #000d;
          border-radius: 100%;
        }
        .earth-container .shadow:after {
          content: "";
          position: absolute;
          inset: 100% 50% -80px;
          width: 1px;
          border-left: 2px solid #fff8;
        }
        .earth-container .shadow .label {
          position: absolute;
          height: 16px;
          width: fit-content;
          bottom: -55px;
          left: calc(50% + 8px);
          color: #fff;
        }
        .earth-container .shadow .label:before {
          content: "";
          position: absolute;
          bottom: 22px;
          left: -237.5px;
          padding: 228px;
          border: 2.........完整代码请登录后点击上方下载按钮下载查看