This HTML file creates a login form with a unique tilt effect using CSS and JavaScript. The form has various visual enhancements, including glowing text, a border with a bulb glowing effect, and a torch light effect upon focus.
The HTML structure consists of:
<!DOCTYPE html>
: Declaration of the HTML version.<html lang="en">
: HTML root element with the language set to English.<head>
: Contains metadata and styles.- Metadata includes character encoding and the title of the page.
- Inline CSS styles define the appearance and animations for various elements.
<body class="night-theme">
: The body of the page with a class for potential theming.
- Reset Styles:
- Resets default margin, padding, and box-sizing for all elements.
- Body Styles:
- Sets a dark grey background color with a transition effect.
- Defines the font-family as Arial or sans-serif for fallback.
- Login Container:
- Positions the login form at the center of the viewport.
- Tilt Container:
- Defines a perspective for a 3D effect.
- Login Form:
- Styles the login form with a transparent background for a glowing effect.
- Adds a border with a glowing bulb effect, rounded corners, padding, and alignment.
- Applies transitions for transformations, border color, and box shadow.
- Uses preserve-3d to maintain 3D transformations and sets initial box-shadow for glowing.
- Form Elements:
- Styles input fields and submit button with appropriate dimensions, colors, and transitions.
- Glowing Title Effect:
- Applies a gradient background to the title for a glowing effect using text clipping and animation.
- Torch Light Effect:
- Applies a box-shadow effect on focus within the form for a torch-like illumination.
- Tilt Effect:
- Calculates mouse position relative to the form and applies a 3D tilt effect accordingly.
- Adjusts the glowing intensity of the border based on the mouse position.
- Background Color Change:
- Changes the body's background color to a darker shade on mouse enter the form and resets it on mouse leave.
tiltContainer
andloginForm
variables fetch relevant DOM elements by their IDs.- Event listeners are added to the
tiltContainer
for mouse movement and to theloginForm
for hover effects. - The JavaScript calculates mouse positions, form rotations, and glowing effects.
- The body's background color changes on hover within the form.