Partager des conseils sur l'utilisation du CSS en combat réel

Cette fois, je vais partager avec vous les compétences d'utilisation de CSS en combat réel. Quelles sont les précautions lors de l'utilisation de CSS en combat réel. Voici des cas pratiques, jetons un coup d'œil.

Créer une animation de découpage

Pour une animation de découpage, utilisez le chemin du clip au lieu de la largeur/hauteur pour éviter les faibles performances causées par le réarrangement du DOM.

.animate {
  width: 200px;
  height: 200px;
  background: #000;
  animation: 1s clip;
}
@keyframes clip {
  0% {
      clip-path: inset(0 0 0 0);
  }
  100% {
      clip-path: inset(0 100% 100% 0);
  }
}

clip-path peut également être utilisé pour couper d'autres graphiques réguliers/irréguliers

.clip {
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多边形 */
  clip-path: circle(30px at 35px 35px); /* 圆形 */
  clip-path: ellipse(30px 25px at 35px 35px); /* 椭圆 */
}

Optimiser les performances d'animation

En plus d'utiliser transform3d pour activer l'accélération GPU , vous pouvez également utiliser will-change pour forcer l'accélération GPU afin d'optimiser les performances de l'animation

.animate {
  width: 200px;
  height: 200px;
  background: #000;
  animation: 1s clip;
  will-change: clip-path;
}
@keyframes clip {
  0% {
      clip-path: inset(0 0 0 0);
  }
  100% {
      clip-path: inset(0 100% 100% 0);
  }
}

Obtenir les proportions

Utiliser la simulation de remplissage, puis utiliser positionnement absolu des éléments enfants

/* 1:1 */
.container {
  width: 200px;
}
.container:after {
  display: block;
  content: ' ';
  padding-top: 100%;
}
/* 16:9 */
.container {
  width: 200px;
}
.container:after {
  display: block;
  content: ' ';
  padding-top: calc(100% * 9 / 16);
}

Centré verticalement

Notre méthode couramment utilisée :

• affichage : bloc en ligne

• haut : 50 % + transformation : translsateY(-50%)

• affichage : flex

Les autres incluent padding上下撑高, display: table, <a href="http://www.php.cn/wiki/902.html" target="_blank">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> + margin: auto + marge : auto, 绝对定位 + margin, etc., c'est une méthode de hack qui n'est pas couramment utilisée et qui ne peut être utilisée que dans des scénarios spéciaux. C'est une méthode de hack avant CSS3. Après CSS3, il n'est pas nécessaire de les utiliser pour obtenir un centrage vertical, donc je n'ai pas réussi. Je n’entre pas dans les détails.

Parmi eux, display: flex est une huile de serpent. Elle peut être utilisée directement dans la plupart des scénarios, mais il existe encore des scénarios particuliers dans lesquels elle ne peut pas être utilisée :

1. les sous-éléments nécessitent une troncature du texte pour des raisons de compatibilité. Pour les navigateurs Android de 4. Mise en page

2. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez. faites attention aux autres articles connexes sur le site Web php chinois !
   Lecture recommandée :

Initialisation de la structure du projet dans les projets front-end

Bogues rencontrés lors de l'utilisation de la portée des variables js

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!