Comment créer un lien de bannière animée en utilisant HTML et CSS

Vue d'ensemble

Nous pouvons créer des bannières animées en utilisant HTML et CSS, HTML fournit la mise en page de la bannière et CSS fournit le style de bannière avec des effets animés. Parfois, dans les bannières créées à des fins publicitaires, des liens sont intégrés et, afin de mettre en évidence les liens, les développeurs animent les liens afin qu'ils soient visibles dans tout le contenu Web et augmentent l'intérêt de l'utilisateur à cliquer.

Grammaire

La syntaxe pour créer des liens en HTML est -

<a href="#"></a>

Algorithme

Étape 1−Créez un fichier HTML dans un éditeur de texte et ajoutez-y un modèle HTML.

Étape 2 − Créez maintenant un conteneur div parent qui contient la bannière avec le nom de classe "bannerCover".

<div class="bannerCover"></div>

Étape 3 − Créez maintenant un div de sous-conteneur qui contient des liens et d'autres données, et ajoutez une classe appelée "bannière".

<div class="banner"></div>

Étape 4 − Ajoutez maintenant le lien vers la bannière à l'aide de la balise d'ancrage HTML.

<a href="https://www.tutorialspoint.com">tutorialspoint</a>

Étape 5 − Créez maintenant un fichier style.css dans le même dossier et liez le fichier css au document HTML.

<link rel="stylesheet" href="style.css">

Étape 6− Stylisez maintenant la bannière pour chaque élément du HTML.

.bannerCover {
   margin: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.banner{
   box-shadow: 0 0 5px gray;
   padding:2rem;
   border-radius: 5px;
   text-align: center;
}

Étape 7 − Positionnez l'élément de balise d'ancrage et animez le lien à l'aide de la propriété d'animation.

a {
   text-decoration: none;
   font-weight: 800;
   font-size: 2rem;
   color: green;
   padding: 0 2rem;
   animation: zoomup 1s linear alternate infinite;
}

Étape 8 − Utilisez des images clés pour animer le lien de la bannière.

@keyframes zoomup{
   0%{
      font-size: 2rem;
   }
   25%{
      font-size: 2rem;
   }
   50%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   75%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
   100%{
      font-size: 1.8rem;
      border-radius: 5px;
      padding: 0.2rem 0.5rem;
      color: white;
      background-color: red;
   }
}   

Étape 9 − Le lien d'animation a été créé avec succès.

Exemple

Dans l'exemple ci-dessus, nous avons construit un lien animé dans la bannière. Pour ce faire, nous créons deux fichiers : index.html et stye.css.

   
   <link rel="stylesheet" href="style.css">
    


   

      

         <a href="https://www.tutorialspoint.com">tutorialspoint</a>
         
(Click the above text to redirect to above page.)
      
   

L'image ci-dessous montre le résultat de l'exemple ci-dessus, par défaut la couleur du lien est blanche. Dans l'image ci-dessous, il y a un texte dans la bannière qui dit "tutorialspoint", donc lorsque l'utilisateur charge cette fonctionnalité dans le navigateur et clique sur le contenu de fond rouge, il redirigera l'utilisateur vers la page Web liée. Les liens dans la bannière sont animés et peuvent rétrécir et s'agrandir au fil du temps.

Conclusion

Puisque nous utilisons du contenu animé dans l'exemple ci-dessus, le nom dans la propriété d'animation CSS et le nom de l'animation dans l'image clé doivent être les mêmes pour animer un élément spécifique, sinon l'animation n'aura pas lieu.

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!