HTML, CSS et jQuery : animer une icône
HTML, CSS et jQuery : créez un effet d'animation d'icônes
Dans la conception Web moderne, les effets d'animation d'icônes sont devenus un élément très populaire et important. En ajoutant du mouvement et de l'interaction, vous pouvez rendre votre page Web plus vivante et attirer l'attention de l'utilisateur. Cet article explique comment utiliser HTML, CSS et jQuery pour créer un effet d'animation d'icône simple et sympa.
Tout d'abord, nous devons préparer du code HTML de base pour créer notre effet d'animation d'icône.
<!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>Dans le code ci-dessus, nous avons introduit un fichier de feuille de style style.css et un fichier de script script.js. Ensuite, nous ajouterons Compléter notre effet d'animation d'icône. style.css和一个脚本文件script.js，接下来我们将会在这两个文件中完成我们的图标动画效果。
在style.css文件中，我们将定义图标和动画效果的样式。
.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%);
}
}在上述代码中，.container类是一个容器，用来包含我们的图标元素。.icon类是一个圆形的红色图标，通过使用border-radius属性将其变为一个圆形。我们还定义了一个名为bounce的动画，在其中指定了元素在不同时间点的位置，实现了一个反弹的效果。我们将这个动画应用到了.icon类上，并设置了2秒钟的循环播放。
接下来，我们需要在script.js文件中添加一些jQuery代码，来实现用户与图标的交互效果。
$(document).ready(function() {
$(".icon").click(function() {
$(this).addClass("active");
setTimeout(function() {
$(".icon").removeClass("active");
}, 2000);
});
});在上述代码中，我们使用了$(document).ready()方法来确保页面完全加载后再执行代码。当用户点击图标元素时，我们将为其添加一个名为active的类。同时，使用setTimeout()
style.css, nous définirons le style de l'icône et les effets d'animation. rrreee
Dans le code ci-dessus, la classe.container est un conteneur utilisé pour contenir nos éléments d'icône. La classe .icon est une icône ronde rouge qui se transforme en cercle à l'aide de l'attribut border-radius. Nous avons également défini une animation nommée bounce, qui spécifie la position de l'élément à différents moments pour obtenir un effet de rebond. Nous avons appliqué cette animation à la classe .icon et défini une boucle de 2 secondes. Ensuite, nous devons ajouter du code jQuery au fichier script.js pour obtenir l'effet d'interaction entre l'utilisateur et l'icône. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode $(document).ready() pour nous assurer que la page est entièrement chargée avant d'exécuter le code. Lorsque l'utilisateur clique sur l'élément icône, nous y ajouterons une classe appelée active. Dans le même temps, utilisez la méthode setTimeout() pour supprimer la classe après 2 secondes afin d'obtenir un effet de changement post-clic. 🎜🎜Enfin, nous enregistrons les codes ci-dessus dans les fichiers correspondants et les plaçons dans le même répertoire que les fichiers HTML. Ouvrez le fichier HTML dans votre navigateur et vous verrez une icône rouge rebondir dans le conteneur, et lorsque vous cliquez dessus, elle apparaîtra et disparaîtra en fondu, ce qui est vraiment cool. 🎜🎜Pour résumer, en combinant HTML, CSS et jQuery, nous pouvons facilement créer un effet d'animation d'icône, ajouter plus de dynamique et d'effets interactifs à la page Web et améliorer l'expérience utilisateur. J'espère que cet article vous sera utile, merci d'avoir lu ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comprendre HTML, CSS et JavaScript: un guide pour débutant
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.
Le rôle de React dans HTML: Amélioration de l'expérience utilisateur
Apr 09, 2025 am 12:11 AM
React combine JSX et HTML pour améliorer l'expérience utilisateur. 1) JSX incorpore du HTML pour rendre le développement plus intuitif. 2) Le mécanisme DOM virtuel optimise les performances et réduit les opérations DOM. 3) Interface utilisateur de gestion basée sur les composants pour améliorer la maintenabilité. 4) La gestion des états et le traitement des événements améliorent l'interactivité.
