This is the 25th day of my participation in the Novembermore Challenge.The final text challenge in 2021

introduce

This issue will bring you a simple creative loading effect – color bar ups and downs loading. As the name implies, we will complete it through SCSS, making 7 rectangles of different colors, decreasing continuously according to different delays and then bouncing back again and again. The implication is that I hope you students like this loading animation, live a colorful life.

Here’s a sneak peek:

How do you feel? In fact, there are a lot of implementation schemes for this animation. Today, I will use a blinding method to achieve it.

The body of the

1. Color bar drawing

<div id="app">
    <div class="loading">
        <span>l</span>
        <span>o</span>
        <span>a</span>
        <span>d</span>
        <span>i</span>
        <span>n</span>
        <span>g</span>
    </div>
</div>
Copy the code

The structure is very simple, we will center div.loading in div#app, and then divide each distance and render different colors in loading.

@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

#app{
    width: 100%;
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading{
    width: 350px;
    height: 120px;
    display: flex;
    overflow: hidden;
    span{
        flex:1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: cursive;
        font-weight: bold;
        text-transform: uppercase;
        font-family: "Baloo Bhaijaan", cursive;
        color: white;
        font-size: 48px;
        position: relative;
        box-sizing: border-box;
        padding-top: 50px;
        @for $i from 1 through 7{&:nth-child(#{$i}) {
                background: linear-gradient(180deg, hsl($i * 20 , 60%.50%) 0, hsl($i * 20 , 60%.90%) 100%);
                box-shadow: inset 0 15px 30px hsl($i * 20 , 60%.50%);
                text-shadow: 12px 12px 12px hsl($i * 20 , 60%.30%);
                border-left: 1px solid hsl($i * 20 , 60%.80%);;
                border-right: 1px solid hsl($i * 20 , 60%.60%);; }}}}Copy the code

For aesthetics, we also introduced a font from Google that is centered on the div#app with an elastic layout.

#app{
	display: flex;
    justify-content: center;
    align-items: center;
}
Copy the code

The purpose of these three sentences is to center the elements up, down, left, and right.

In addition, one of the advantages of SCSS is that it is very convenient to traverse, that is, the sentence **@for ifrom1through7∗∗ is traversed seven times, and the sentence I from1through7 ** is traversed seven times. Through ifrom1through7∗∗ the sentence is traversed seven times, through I can get the subscript, can also participate in the operation, our color value is completed by his combination with HSL color disk (HSL refers to hue, saturation, brightness). Of course, the palette has 360 degrees, so we only take part of it to create a fresh gradient. If the palette is evenly divided, it will still feel dirty.

We found that the text was set to padding-top: 50px. The reason for this is that the top part of the text disappears first as soon as we finish the undation animation. We moved it down a little bit to make sure that the letters were displayed longer.

2. Ups and downs animation

We said at the beginning that this was going to be a trick, so we’re not going to change the height of the span or cut it.

.loading{
    span{
       	/ /...
        &::after{
            content: "";
            display: block;
            box-sizing: border-box;
            position: absolute;
            height: 100%;
            top: 0;
            left: -1px;
            right: -1px;
            background: linear-gradient(180deg, white 0, rgb(249.249.249) 100%);
            animation: shorten 2.1 s infinite ease-out;
        }
        @for $i from 1 through 7 {
                // ...
                &::after{
                    animation-delay: # {$i * 0.08 s};
                }    
            }
        }
    }
}
@keyframes shorten {
    12%  { height: 10px; }}Copy the code

Looking at the SCSS code just now, it can be found that we actually blocked it through an absolute positioning pseudo-class, making people feel that its height has changed, but in fact it is not.

As for the animation, it is easier just to make it change the height to 10px at some point in the initial stage, that is, the block becomes smaller, the display height is increased, and then gradually increase to the whole block to complete the undation effect. In addition, I still gave them different delays by iterating through their pseudo classes to give them a more layered feel.

So with that, we’re done with this case, online demo.

conclusion

This time through a loading creative animation case, to the students about how CSS elastic center, SCSS traversal, HSL color plate to change the color value of the convenience and a way of masking, I hope you will like, more support oh ~