Pixel Animation in Background : HTML, CSS @rayen-code

Rayen

Adding a captivating background animation to your website's <body> element can significantly enhance its visual appeal and user engagement. In this tutorial, we'll take you through the steps of creating a custom background animation using HTML, CSS, and JavaScript. Elevate your website's aesthetics with an eye-catching and dynamic background that leaves a lasting impression on your visitors.




Step 1: HTML Markup:

Start by setting up the basic HTML structure for your webpage. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pexel Background </title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="pxl"></div>
    <h1>CSS</h1>
</body>

</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the background container and define the animation. 
/*-------------------- CSS --------------------*/
* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #0f0f0f;
    padding: 0;
    margin: 0;
}

.pxl {
    width: 100%;
    height: 100vh;
    background: conic-gradient(from 180deg at 50% 70%, #fff 0deg, #ffc800 80deg, #cc0000 160deg, #80caff 240deg, #00c900 320deg, #fff 360deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, #fff 2px, #0000 2px) 50% 50% / 20px 20px, url("https://assets.codepen.io/605876/noise-mask.png") 300px 50% / 300px 300px;
    -webkit-mask-composite: source-in;
    -webkit-animation: anime 20s infinite linear;
}
@-webkit-keyframes anime {
    to {-webkit-mask-position: 50% 50% , 0 50%;
    mask-position: 50% 50%, 0 50%;
    }
}
h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    margin: 0;
    font-size: 125px;
    mix-blend-mode: soft-light;
    text-shadow: 2px 2px white;
}

You can customize the animation's properties, duration, colors, and timing function to match your website's design. Experiment with different keyframes and transitions to achieve the desired visual effect.

Congratulations! You've successfully created a captivating custom <body> background animation using HTML, CSS, and JavaScript. This dynamic element can elevate your website's aesthetics and provide a visually engaging experience for your visitors.

Feel free to implement this background animation on your website to leave a lasting impression on your audience. The skills you've gained from this tutorial will allow you to create more interactive and visually appealing user interfaces.

0 Comments