HTML5 et CSS3 réalisent l'effet de commutation de l'animation intelligente

Cet article partagera avec vous une démo basée sur HTML5+CSS3 pour obtenir un effet de commutation de tabulation animé intelligent. C'est très bien et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Le concepteur. a donné une image de changement d'onglet. Bien qu’il s’agisse d’une petite fonction, les ingénieurs front-end doivent encore prêter attention à de nombreux détails lors de sa mise en œuvre. J'ai écrit une démo pour votre référence.

L'effet final est le suivant :

Pour que l'animation gif montre les détails, j'ai prolongé la durée de l'animation à 3 secondes

Idée de mise en œuvre

Lignes verticales à intervalles, car elles ne sont pas verticales, donc les bordures ne peuvent pas être utilisées. Je vais utiliser des pseudo-éléments.

Il n'y a que 3 barres verticales, mais il y a 4 li. C'est simple et peut être sélectionné à l'aide du sélecteur :not(:first-child).

La couleur d'arrière-plan change parce que je veux avoir un effet de petit à grand. Par conséquent, je ne peux pas utiliser directement la couleur d'arrière-plan pour y parvenir. Je prévois également d'utiliser des pseudo-éléments pour y parvenir.

Si la taille du pseudo-élément est utilisée pour le contrôler, le calcul sera plus compliqué, je souhaite donc utiliser box-shadow pour y parvenir.

D'accord, c'est tout. Commençons à écrire le code, comme suit :

Code HTML

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

La structure du code ci-dessus a déjà été écrite. Je pense que c'est OK, je ne ferai donc aucun ajustement. Il n'y a pas de code encombrant.

Code CSS

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

Analyse du code :

L'implémentation de l'animation est très simple, utilisez simplement l'attribut transition.

Pour contrôler votre propre pseudo-élément et le pseudo-élément de l'élément frère suivant, utilisez simplement le sélecteur +.

Les autres codes sont relativement clairs et simples, vous pouvez les analyser vous-même.

Il est très simple d'obtenir cet effet. L'accent est mis sur l'accumulation quotidienne et la combinaison flexible de divers paramètres. Penser à la méthode d’implémentation et enfin écrire le code est très rapide. Et il n’y a pas de point culminant de connaissance là-dedans.

La raison pour laquelle CSS est difficile n'est pas que vous ne savez pas comment le faire, mais que vous ne savez pas comment l'adapter.

En fait, nous n'avons encore restauré que 99 % de l'effet de conception. L'une des deux lignes est à l'intérieur de l'arrière-plan et l'autre est à l'extérieur de l'arrière-plan. Que dois-je faire si je veux mettre les deux divisions. lignes à l’intérieur de l’arrière-plan ? Qu’en est-il de la mise en œuvre ? Vous pouvez y réfléchir.

Profitez du scss. Le CSS ci-dessus est compilé. En fait, il est très pratique et rapide de l'implémenter avec scss, et le code est plus lisible.

La démonstration est la suivante :

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

Bien sûr, j'ai utilisé des variables de couleur et du code mixin dans ce code. Vous ne pouvez pas l'utiliser directement.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser le dégradé linéaire de CSS3 pour créer une bordure

Comment masquer la barre de défilement en CSS

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!