HTML Explanation
01
In the <body>, a div with the class loader acts as the container for the animated elements.
02
Within this div, four child div elements are nested.
03
These child elements are the individual pieces of the loader, which will be animated using CSS.
CSS Explanation
01
The universal selector (*) resets all margins and paddings and sets box-sizing to border-box for consistent sizing across all elements.
02
The body is styled as a flex container, centering its content both vertically and horizontally, with a dark blue background (#001862) to provide contrast for the animation.
03
The .loader class defines the size and initial background color of the loader.
04
It has a relative position to ensure its child div elements can be positioned absolutely within it.
05
A transition effect is added for smooth animations, especially when the loader is hovered over.
06
Each div inside the loader has an absolute position, full width and height, and a border.
07
They are placed at different positions (top, left) to create the base for the rotating animation.
08
The transform-origin property is used to set the pivot points for the rotation, which differ for each child div.
09
The animation property applies a keyframe animation called animateBox that rotates each div from 0deg to 180deg over two seconds, repeating infinitely with an ease-in timing function.
10
The @keyframes animateBox defines the animation's behavior.
11
At 0%, the rotation starts at 0deg.
12
At 50% and 100%, the rotation reaches 180deg, creating a continuous flipping motion for each div.
13
When the .loader or any of its child div elements are hovered over, the background color changes to #f0c00f, and a glowing effect is added using box-shadow.
14
This glow radiates outward with varying intensity, enhancing the visual impact of the loader.
HTML
CSS
JS
CSS