Virtual 3D moon using Html and Css

Css

Second, Create a Css file with the name of style.css and paste the code given below, in your Css file. Remember, you’ve to create a file with .css extension.

Note*: Click on the Css Code then press ctrl + A to select the whole Css Code, then ctrl + C to copy.

html {
          --zoom: 120;
          --black: #000;
          --white: #fff;
          --red: #d34747;
          --green: #1c6f1c;
          --blue: #2a2aaa;
          --yellow: yellow;
          --grey: grey;
          --violet: violet;
          --purple: purple;
          --pink: pink;
          --bg: #202020;
        }
        
        :root {
          --unit: 1vmin;
          --available-screen-min: 665;
          --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
        }
        
        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 16px;
        }
        
        *::after,
        *::before {
          content: "";
          display: block;
          position: relative;
        }
        
        head::before,
        head::after,
        body::before,
        body::after,
        html::before,
        html::after {
          content: "";
          position: absolute;
          background-repeat: no-repeat;
          filter: blur(0);
        }
        
        body {
          all: unset;
          background-color: var(--bg);
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
          --space-animation-time: 40s;
          --moon-animation-time: 20s;
        }
        
        .canvas {
          height: 100vh;
          width: 100%;
          background-color: var(--black);
          background-image: url("https://codroid.netlify.app/html/virtual-3d-moon/demo/bg.jpg");
          display: grid;
          place-items: center;
          overflow: hidden;
          background-position: left;
          background-repeat: repeat-y;
          animation: animation var(--space-animation-time) linear infinite;
        }
        
        .moon {
          background-color: var(--grey);
          height: calc(200 * var(--px));
          width: calc(200 * var(--px));
          border-radius: 50%;
          box-shadow: 0px 0px calc(70 * var(--px)) calc(5 * var(--px)) #fff;
          background-image: url("https://codroid.netlify.app/html/virtual-3d-moon/demo/pad.jpg");
          background-size: calc(430 * var(--px));
          background-position: left;
          background-repeat: no-repeat;
          animation: animation var(--moon-animation-time) linear infinite;
        }
        
        @keyframes animation {
          to {
            background-position: right;
          }
        }

One-Tap to Get the File

Note*: After Clicking the Download button wait for sometime.
If the source file dosen't start to download, then allow this site to download files in your system.

Frequently Asked Questions

Q 1: Can I use this Source Code without giving credits ?

Ans: Yes, you can use but if your bring this projects, then should give us a credit at footer, because it takes alot time make all thess kinds of projects now if you ask that I want to bring it online but I will not give any credits to the developers & the provider then it is very wrong.

Q 2: Actually I want to bring this project online but I don't want to give credits ?

Ans: Ok, we have problem but also you cannot claim that it is made by you.
It is not all about flex you should increase you knowledge.

Q 3: If I am bringing this project online and not giving credits & claiming it is developed by me then ?

Ans: Ok, 1-3 times you will be warned and your that site will be suspended.
Still if you continue, then it can become to a legal things.