Comment utiliser CSS pour créer un effet de sélection

Étapes sur la façon d'utiliser CSS pour obtenir l'effet de sélection

L'effet de sélection est un effet spécial frontal courant qui affiche un texte ou des images en défilement continu sur une page Web, ajoutant du mouvement et de la vitalité à la page. Cet article présentera les étapes spécifiques sur la façon d'utiliser CSS pour obtenir l'effet de sélection et fournira des exemples de code correspondants pour référence.

Étape 1 : Créer une structure HTML

Tout d'abord, nous devons créer un conteneur en HTML pour obtenir l'effet de sélection. Vous pouvez utiliser un élément div comme conteneur, comme indiqué ci-dessous :

<div class="marquee-container">
  <ul class="marquee-content">
    <li>跑马灯内容1</li>
    <li>跑马灯内容2</li>
    <li>跑马灯内容3</li>
    <!-- 添加更多的跑马灯内容 -->
  </ul>
</div>

Dans le code ci-dessus, nous avons créé un élément div avec la classe "marquee-container" comme conteneur du marquee, et créé une classe à l'intérieur de ce conteneur avec " L'élément ul de "marquee-content" est utilisé pour héberger le contenu du marquee.

Étape 2 : Définir les styles CSS

Ensuite, nous devons définir les styles CSS correspondants pour le conteneur et le contenu. Les étapes spécifiques sont les suivantes :

1. Définissez la largeur et la hauteur du conteneur, et réglez-le sur un positionnement relatif (position : relative) pour positionner le contenu du chapiteau dans le conteneur.

.marquee-container {
  width: 100%;
  height: 100px;
  position: relative;
}

2. Définissez le style du contenu et l'effet de défilement. Définissez l'élément ul du contenu sur un positionnement absolu (position : absolue) et définissez sa largeur sur une valeur plus grande pour garantir que le contenu peut défiler horizontalement.

.marquee-content {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  white-space: nowrap; /* 防止内容换行 */
  animation: marquee 10s linear infinite; /* 设置滚动效果 */
}

@keyframes marquee {
  0% { transform: translateX(0%); } /* 初始状态，内容从左侧显示 */
  100% { transform: translateX(-100%); } /* 结束状态，内容向左滚动完全消失 */
}

Dans le code ci-dessus, nous avons mis en place une animation @keyframes nommée "marquee" pour réaliser un défilement horizontal du contenu via la fonction translateX de l'attribut transform. Définissez l'état initial de 0 % sur un décalage horizontal de 0 %, l'état final de 100 % sur un décalage horizontal de -100 % (c'est-à-dire faites défiler vers la gauche jusqu'à ce que le contenu disparaisse complètement) et définissez l'animation pour qu'elle dure 10 secondes, linéairement. mouvement et boucle infinie.

Étape 3 : Ajustez l'effet d'affichage du conteneur et du contenu

Enfin, nous pouvons ajuster l'effet d'affichage du conteneur et du contenu en fonction des besoins réels. Par exemple, nous pouvons définir la couleur d’arrière-plan, les bordures, les marges, etc. du conteneur pour mieux correspondre au style général de la page. Dans le même temps, nous pouvons également définir la police, la couleur, la taille de la police, etc. du contenu, et ajouter des effets de transition CSS pour augmenter la fluidité du chapiteau.

.marquee-container {
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  margin: 20px;
}

.marquee-content li {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 16px;
  padding: 10px;
  transition: color 0.3s ease-in-out;
}

.marquee-content li:hover {
  color: #ff0000; /* 鼠标悬停时改变文字颜色 */
}

Dans le code ci-dessus, nous définissons la couleur d'arrière-plan du conteneur sur #f2f2f2, la bordure sur 1px solide #ccc et définissons une marge de 20px. Dans le même temps, nous définissons la police du contenu sur Arial, la couleur sur #333, la taille de la police sur 16 px et définissons un effet de transition de couleur de 0,3 seconde pour le contenu, de sorte que la couleur du texte devienne progressivement rouge lorsque le la souris est survolée.

En résumé, grâce aux étapes ci-dessus, nous pouvons utiliser CSS pour obtenir un simple effet de sélection. Bien entendu, en fonction des besoins réels, nous pouvons encore étendre et optimiser cet effet. J'espère que le contenu ci-dessus vous sera utile !

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!