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.

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

In thestyle.cssfile, 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%); } }

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

Next, we need to add some jQuery code to thescript.jsfile 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); }); });

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 calledactive. At the same time, use thesetTimeout()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!