CSS Animation | Animated 3D LIGHT SPHERES HTML CSS | CSS 3D Animation Effects

Описание: CSS Animation | Animated 3D LIGHT SPHERES HTML CSS | CSS 3D Animation Effects
Follow us -
.∎ Get Complete Source Codes - https://codingmaker1.blogspot.com/
∎ Instagram - https://www.instagram.com/coding.maker/
∎ CodePen - https://codepen.io/mr-zouraiz123

This code is for a responsive web design that creates an animated 3D sphere. The sphere is made up of several nested div elements, each with its own animation and styling.

The :root element at the beginning of the code defines some global variables that are used throughout the rest of the styles. These variables include the animation speed (--s), the delay between each element's animation (--d), and the color of the sphere (--c).

The * selector applies some basic styles to all elements on the page, including setting the transform-style to preserve-3d and the box-sizing to border-box.

The body element defines the overall layout and appearance of the page. It sets the width and height of the page to the full viewport size, hides any overflow, and centers the content using flexbox. It also sets the perspective of the page to 1000vmin (a viewport-relative unit of length) and sets the background to a radial gradient.

The .sphere class applies styles to the main 3D sphere element. It sets the size, background color, and position of the element, as well as an animation that rotates the sphere around its X and Y axes. It also sets the cursor to none and uses flexbox to center the content of the element.

The .sphere:hover selector applies styles to the sphere when the mouse is hovering over it. In this case, it pauses the animation.

The @keyframes rule defines an animation called "spin" that rotates the sphere around its X and Y axes.

The .sphere div class applies styles to the nested div elements that make up the sphere. It sets the size and position of each element, as well as a border, border radius, and box shadow. It also sets an animation called "shine" that changes the border color and box shadow of the element.

The .sphere div:before selector applies styles to a pseudo-element that is inserted before each div element. It creates a second nested element with similar styles to the main div element.

The .sphere div:nth-child(2) through .sphere div:nth-child(5) selectors apply styles to specific nested div elements, modifying their size, position, animation delay, and color using the global variables defined in the :root element.

Finally, the @keyframes rule for the "shine" animation changes the border color and box shadow of the nested div elements over the course of the animation.