Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-05-24 16:01:41
original
1430 Les gens l'ont consulté

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);
  }
}
Copier après la connexion

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); /* 椭圆 */
}
Copier après la connexion

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);
  }
}
Copier après la connexion

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);
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal