Pure CSS3 realizes page loading animation effect (with code)

When opening a page, you often encounter a situation where the page is loading. As a front-end developer, do you know how to use CSS3 to achieve page loading animation effects? This article will share with you a cool and practical CSS3 loading animation effect code. It has certain reference value. Interested friends can take a look.

Making page loading loading animation requires the use of many attributes in CSS3, such as: animation animation, display, transform attributes, etc. If you are not sure, you can read my previous articles. I have them before. introduced, or visit CSS3 video tutorial.

Example demonstration: Create a columnar animation loading effect. The stripes change from long to short and then longer. The specific code is as follows:

HTML part:

<div class="box">
   <div class="r1"></div>
   <div class="r2"></div>
   <div class="r3"></div>
   <div class="r4"></div>
   <div class="r5"></div>
</div>

CSS part:

.box {
    margin: 100px auto;
    width: 50px;
    height: 60px;
   }   
   .box>div {
    background-color: #67CF22;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
   }   
   .box .r2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
   }   
   .box .r3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
   }   
   .box .r4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
   }   
   .box .r5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
   }   
   @-webkit-keyframes stretchdelay {
    0%,
    40%,
    100% {
     -webkit-transform: scaleY(0.4)
    }
    20% {
     -webkit-transform: scaleY(1.0)
    }
   }   
   @keyframes stretchdelay {
    0%,
    40%,
    100% {
     transform: scaleY(0.4);
     -webkit-transform: scaleY(0.4);
    }
    20% {
     transform: scaleY(1.0);
     -webkit-transform: scaleY(1.0);
    }
   }

The effect is as shown in the picture:

The above code shared the CSS3 to achieve the page loading animation effect. It is used frequently in the project and can be used directly. I hope you can try it yourself and see if you can create other effects. I hope this article will be helpful to you! For more related tutorials, please visit CSS3 Online Manual

The above is the detailed content of Pure CSS3 realizes page loading animation effect (with code). For more information, please follow other related articles on the PHP Chinese website!