Divinector Watch on YouTube

Animated Background with Pure CSS and Html | No Javascript no Jquery

2 min read 2 hours ago
Published on Nov 06, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create an animated background using only HTML and CSS, without any JavaScript or jQuery. This technique is useful for enhancing the visual appeal of web pages, making them more engaging for users.

Step 1: Set Up Your HTML Structure

Create a basic HTML document to hold your animated background. Follow these steps:

  1. Open your code editor and create a new HTML file.
  2. Add the basic structure of an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Background</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="background"></div>
</body>
</html>
  1. Save the file as index.html.

Step 2: Create the CSS Styles

Now, you will create a CSS file to style the background. Follow these steps:

  1. Create a new file in the same directory, naming it styles.css.
  2. Add the following CSS rules to create an animated gradient background:
body, html {
    height: 100%;
    margin: 0;
}

.background {
    height: 100%;
    background: linear-gradient(270deg, #ff6b6b, #f7c6c7, #ff6b6b);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
  1. Save the styles.css file.

Step 3: Test Your Animation

  1. Open your index.html file in a web browser.
  2. You should see a smoothly animated gradient background that transitions colors.

Step 4: Customize Your Animation

You can modify the colors and animation duration to suit your design. Here’s how:

  • Change the colors in the linear-gradient function.
  • Adjust the animation duration in the .background class to speed up or slow down the animation.

Common Pitfalls to Avoid

  • Ensure that the CSS file is correctly linked in your HTML file.
  • Check for any typos in your code, especially in the class names and properties.

Conclusion

You have successfully created an animated background using only HTML and CSS. This technique allows for creative and dynamic web designs without relying on JavaScript. Experiment with different gradients and animation effects to enhance your projects further. For more advanced animations and effects, consider exploring additional CSS properties or integrating other CSS techniques.

Table of Contents

Recent