HTML, CSS and jQuery: Animating an Icon-JS Tutorial-php.cn

HTML, CSS and jQuery: Animating an Icon

WBOY

Release： 2023-10-24 11:06:27

Original

1093 people have browsed it

HTML, CSS and jQuery: Animating an Icon

HTML, CSS and jQuery: Making an Icon Animation Effect

In modern web design, icon animation effects have become a very popular and important element. By adding some movement and interaction, you can make your web page more lively and attract the user's attention. This article will introduce how to use HTML, CSS and jQuery to create a simple and cool icon animation effect.

First, we need to prepare some basic HTML code to build our icon animation effect.

<!DOCTYPE html>
<html>
<head>
    <title>图标动画效果</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div class="container">
        <div class="icon"></div>
    </div>
</body>
</html>

Copy after login

In the above code, we introduced a style sheet file style.css and a script file script.js. Next, we will use these two Complete our icon animation effect in one file.

In the style.css file, we will define the style of the icon and animation effects.

.container {
    width: 200px;
    height: 200px;
    position: relative;
}

.icon {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #ff5a5a;
    border-radius: 50%;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0% {
        transform: translate(-50%, -50%);
    }

    25% {
        transform: translate(-50%, -150%);
    }

    50% {
        transform: translate(-50%, -50%);
    }

    75% {
        transform: translate(-50%, 50%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

Copy after login

In the above code, the .container class is a container used to contain our icon elements. The .icon class is a round red icon that is turned into a circle using the border-radius property. We also defined an animation named bounce, which specifies the position of the element at different points in time to achieve a rebound effect. We applied this animation to the .icon class and set a 2-second loop.

Next, we need to add some jQuery code to the script.js file to achieve the interaction between the user and the icon.

$(document).ready(function() {
    $(".icon").click(function() {
        $(this).addClass("active");
        setTimeout(function() {
            $(".icon").removeClass("active");
        }, 2000);
    });
});

Copy after login

In the above code, we use the $(document).ready() method to ensure that the page is fully loaded before executing the code. When the user clicks on the icon element, we will add a class to it called active. At the same time, use the setTimeout() method to remove the class after 2 seconds to achieve a post-click change effect.

Finally, we save the above codes to the corresponding files and place them in the same directory as the HTML files. Open the HTML file in your browser and you will see a red icon bouncing around in the container, and when you click on it, it will fade in and out, which is really cool.

To sum up, by combining HTML, CSS and jQuery, we can easily create an icon animation effect, add more dynamic and interactive effects to the web page, and improve the user experience. I hope this article is helpful to you, thank you for reading!

The above is the detailed content of HTML, CSS and jQuery: Animating an Icon. For more information, please follow other related articles on the PHP Chinese website!