“Hypnotize You!” CSS3 Animated Screen Project in HTML/CSS

Project Overview

• Title: Hypnotize You! (CSS3 Animated Screen)

• Submitted by: abfiph

• Languages Used: HTML & CSS only

• Purpose: To create a hypnotic visual effect that grabs attention and looks like it’s pulling the viewer inward.

HTML Explanation

• Simple structure with just one <div>:

  XHTML

  <div class="hypno"></div>

  1	<div class="hypno"></div>

• This div is used to generate the hypnotic spinning pattern.

CSS Explanation

Body Styling

• background: black; → Sets the background to black for high contrast.

• overflow: hidden; → Hides anything going outside the screen.

• margin: 0; → Removes default browser spacing.

• Creates a clean full-screen experience.

.hypno Div Styling

• position: absolute; top: 50%; left: 50%; → Places the element in the center of the screen.

• transform: translate(-50%, -50%); → Precisely centers the div.

• width and height: 200px; → Fixed size for the central animated element.

• border-radius: 50%; → Makes the div circular.

Box Shadows

• Uses box-shadow to simulate concentric rings:

  CSS

  box-shadow: 0 0 0 20px white, 0 0 0 40px black, 0 0 0 60px white, 0 0 0 80px black, 0 0 0 100px white, 0 0 0 120px black;

  1 2 3 4 5 6 7

  box-shadow:   0 0 0 20px white,   0 0 0 40px black,   0 0 0 60px white,   0 0 0 80px black,   0 0 0 100px white,   0 0 0 120px black;

• Alternating black and white circles give a hypnotic look.

Animation (spin)

• @keyframes spin defines a 360-degree rotation:

  css

  CSS

  @keyframes spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

  1 2 3 4

  @keyframes spin {   0%   { transform: translate(-50%, -50%) rotate(0deg); }   100% { transform: translate(-50%, -50%) rotate(360deg); } }

• animation: spin 5s linear infinite;

  • 🔄 Spins the shape continuously.

  • ⏱ 5 seconds per full rotation.

  • ⚙️ linear speed — rotates at a steady pace.

  • 🔁 infinite loop — keeps spinning forever.

Final Visual Effect

• Creates a rotating illusion of concentric rings.

• Looks like you’re being drawn into the center (hypnosis effect).

• No JavaScript needed — pure CSS3 magic!

Download Here: Summer Fun Code_Hypnotizing