Comment utiliser CSS pour créer un effet de barre de notification de texte défilant de manière transparente

Comment utiliser CSS pour créer un effet de barre de notification de texte à défilement transparent

La barre de notification de texte à défilement transparent est un effet courant dans les pages Web et peut être obtenue via CSS. Cet article explique comment utiliser CSS pour créer une barre de notification de texte à défilement transparent et fournit des exemples de code spécifiques.

Pour obtenir un effet de barre de notification de texte défilant transparent, vous avez d'abord besoin d'un conteneur pour envelopper le texte et définir la largeur, la hauteur et la couleur d'arrière-plan du conteneur. Par exemple, nous pouvons utiliser un élément div et lui donner un nom de classe comme celui-ci :

<div class="scrolling-text-container">
    文字通知栏内容
</div>

Ensuite, nous devons définir des styles CSS pour contrôler l'apparence et le comportement de la barre de notification textuelle. Tout d'abord, nous allons ajouter un style de base au conteneur, comme indiqué ci-dessous :

.scrolling-text-container {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}

Le code ci-dessus rendra la largeur du conteneur à 100 %, la hauteur à 30 pixels et définira la couleur d'arrière-plan sur gris. Dans le même temps, nous définirons l'attribut de débordement sur "masqué" pour masquer le contenu en dehors de la barre de notification textuelle, garantissant que seule la partie visible du conteneur est affichée.

Ensuite, nous devons envelopper le contenu de la barre de notification textuelle dans un élément span et définir les attributs de style clés pour celui-ci, comme indiqué ci-dessous :

<div class="scrolling-text-container">
    <span class="scrolling-text">文字通知栏内容</span>
</div>

.scrolling-text {
    position: relative;
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

Dans le code ci-dessus, nous définissons un nom de classe pour l'élément span, et définit les attributs de style nécessaires. Parmi eux, nous définissons l'attribut position sur "relatif" pour maintenir le positionnement relatif pendant l'animation de défilement. Nous définissons également l'attribut display sur "inline-block" afin que l'élément span s'affiche sur une seule ligne et conserve la largeur du conteneur inchangée.

Nous avons également défini une animation appelée "scroll-left" qui fera défiler progressivement le texte de droite à gauche. Cette animation utilise des effets d'animation linéaires et définit une durée de 10 secondes. Pour obtenir une boucle infinie, nous définissons la propriété animation-iteration-count sur "infinite". Le code d'animation spécifique est le suivant :

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

La règle @keyframes dans le code ci-dessus définit deux images clés de l'animation de défilement vers la gauche. A 0%, nous remettons la position du texte à la position d'origine, c'est-à-dire sans aucun décalage. A 100%, on décale la position du texte de 100% vers la gauche, pour qu'il disparaisse complètement à gauche du conteneur et réapparaisse depuis la droite.

Enfin, nous devons ajouter quelques styles supplémentaires à la barre de notification textuelle pour mieux s'adapter à la conception et à la mise en page de la page Web. Vous pouvez l'ajuster selon vos besoins. Par exemple, vous pouvez définir la couleur, la police, la taille, etc. du texte, ainsi que les marges, l'espacement, etc. du texte. Voici un exemple d'extrait de code pour personnaliser le style de la barre de notification textuelle :

.scrolling-text {
    ...
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    letter-spacing: 1px;
}

L'extrait de code ci-dessus définit la couleur de police de la barre de notification textuelle sur noir, la famille de polices sur Arial et la police de sauvegarde sans-serif, et la taille de la police à 16 pixels, la marge à 5 pixels et l'espacement à 1 pixel.

Avec les exemples de codes HTML et CSS ci-dessus, vous pouvez facilement obtenir un effet de barre de notification de texte défilant transparent. Créez simplement le style approprié en fonction de vos besoins. De cette façon, vous pouvez utiliser CSS pour implémenter une barre de notification textuelle dynamique et attrayante dans votre page Web afin d'attirer l'attention des utilisateurs et de leur fournir des informations importantes.

J'espère que cet article pourra vous aider à comprendre l'effet du CSS pour créer une barre de notification de texte à défilement transparent. J'aimerais que vous puissiez utiliser CSS pour créer une magnifique barre de notification textuelle !

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!