Arte en code Watch on YouTube

Tutorial de Corazón Latiendo con Html y Css

3 min read 7 days ago
Published on May 10, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, we will create a pulsating heart animation using HTML and CSS. This project is perfect for anyone looking to add a personal touch to their web designs or to create a thoughtful gift that brings a smile to someone special. By following these steps, you’ll learn how to craft a visually appealing heart with shadow effects that can be easily customized.

Step 1: Setting Up the HTML Structure

To begin, create a new HTML file. This file will house the structure of our heart design.

  1. Open your text editor and create a file named index.html.
  2. Add the following basic HTML structure:
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Corazón Latiendo</title>
</head>
<body>
    <div class="heart"></div>
</body>
</html>
  1. Save the file.

Step 2: Creating the CSS Styles

Next, we will style the heart using CSS, which will give it color, shape, and animation.

  1. Create a new CSS file named styles.css.
  2. Add the following styles to your CSS file:
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(-45deg);
    margin: 50px;
    animation: beat 1s infinite;
}

.heart::before,
.heart::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}

.heart::before {
    top: -50px;
    left: 0;
}

.heart::after {
    left: 50px;
    top: 0;
}

@keyframes beat {
    0%, 20%, 50%, 80%, 100% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
}
  1. Save the CSS file.

Step 3: Testing the Animation

Now that we have our HTML and CSS set up, it’s time to see our heart in action.

  1. Open your index.html file in a web browser.
  2. You should see a red heart that beats continuously.

Step 4: Customizing Your Heart

You can personalize your heart design to make it more unique.

  • Change Color: Modify the background-color property in the .heart class to any color you like.
  • Resize the Heart: Adjust the width and height values in the .heart class to make the heart bigger or smaller.
  • Adjust Animation Speed: Change the duration in the animation property (e.g., change 1s to 0.5s for a faster heartbeat).

Conclusion

In this tutorial, you learned how to create a pulsating heart using HTML and CSS. This project not only enhances your web design skills but also allows for personalization to spread joy. Feel free to experiment with different styles and animations to make the heart your own. Happy coding!

Table of Contents

Recent