With CSS can achieve a lot of graphics, their own slightly collation, I hope to be helpful to you, presented 'bump man' chart 👇Copy the code

A bump

👀 Is it not quite the same as expected

  • The main advantage is the minimum width
    • Eastern characters are single characters
    • The minimum width of a western character is determined by a specific sequential unit of English characters encountered with Spaces ‘-‘? ‘These three will break the line and the others will not tell without trying

Small two, on the specific code

Ao {display: inline-block; width: 0; Font-size: 14px; line-height: 18px; margin: 35px; color: #fff; } .ao:before { outline: 2px solid #cd0000; }. Ao :before {content: "love you love"; }<span class="ao"></span>
Copy the code

Please poke me hard for more specific code

The actual display is as follows: 👇

triangle

  • I should see this a little bit more and LET me show you three solutions that I know of

  • 1 Using border has several overlooked points

    • How does a border look in block-level elements and inline elements without the height constraint
    • Block elements only add width:0
    • Inline elements only add display: inline-block;

  • 2 Use clip-path details to take you MDN clip-path

  • 3. The overlapping occlusion of elements is mainly used

The specific effect is shown as 👇

Specific example code stamp me 👇 to experience

Implement loading animation effect

Small two, the last screenshot, no contact with the recording software next time certain! Specific poke me 👇 experience

  • I think there are two key points
    • Visual form (probably universal border)
    • Continuous transfer (animation to MDN Animation)
.loading { width: 40px; height: 40px; border: 10px solid lightblue; border-radius: 50%; border-top-color: transparent; animation: rotate 1s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}<div class="loading"></div>
Copy the code

It feels like there are other ways to implement loading graphics (gradient plus mask…).

The last

The first “concave-convex man” example comes from zhang Xinxu’s “CSS World”, a great book. I wish you a happy Mid-Autumn Festival ~