Sharing tips on using CSS in actual combat

This time I will share with you the skills of using CSS in actual combat. What are the precautions for using CSS in actual combat? The following is a practical case, let’s take a look.

Create clipping animation

For clipping animation, use clip-path instead of width/height to avoid low performance caused by DOM rearrangement.

.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 can also be used to cut other regular/irregular graphics

.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); /* 椭圆 */
}

Optimize animation performance

In addition to using transform3d to enable gpu acceleration, you can also use will-change forces gpu acceleration to optimize animation performance

.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);
  }
}

Achieve aspect ratio

Use padding simulation, and then use child elements

absolute positioning

/* 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);
}

vertical Center

Our commonly used method:

• dislay: inline-block

• top: 50% transform: tranlsateY(- 50%)

• display: flex

The rest include

padding up and down support, display: table , position<a href="//m.sbmmt.com/wiki/902.html" target="_blank"> margin: auto</a>, absolute positioning margin, etc. These are hack methods that are not commonly used and can only be used in special scenarios. They are hacks before CSS3. CSS3 You won't have to use these to achieve vertical centering later on, so I won't say more.

display: flex is a snake oil. It can be used directly in most scenarios, but there are still some special scenarios that cannot be used:

1. sub-element Text truncation is required. In order to be compatible with Android browsers of 4. -wrap, multi-line layout is not allowed

2. I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
   Recommended reading:

Initializing the project structure in the front-end project

##Bugs encountered when using js variable scope

The above is the detailed content of Sharing tips on using CSS in actual combat. For more information, please follow other related articles on the PHP Chinese website!