CSS implements creative page loading (loading) animation effects-CSS Tutorial-php.cn

CSS implements creative page loading (loading) animation effects

yulia

Release： 2018-10-20 10:48:38

Original

3647 people have browsed it

Have you ever encountered the page "Loading, please wait" when browsing the website? As a front-end engineer, can you use CSS to create page loading (loading) animation effects? This article will share with you a creative page loading (loading) animation code, which has certain reference value. Interested friends can take a look.

Making a creative page loading (loading) animation requires the use of many attributes in CSS, such as: animation animation, transform attribute, etc. If you are not sure, you can refer to the relevant information on the PHP Chinese website article, or visit CSS Video Tutorial.

Instance description: Use div to create a creative square loading page effect. During the loading process, the square flips along the Y-axis and then flips along the X-axis. The specific code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .spinner {
    width: 60px;
    height: 60px;
    background-color: #67CF22;
    margin: 100px auto;
    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
   }
   
   @-webkit-keyframes rotateplane {
    0% {
     -webkit-transform: perspective(120px)
    }
    50% {
     -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
     -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
   }
   
   @keyframes rotateplane {
    0% {
     transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
   }
  </style>
 </head>
 <body>
  <div class="spinner"></div>
 </body>
</html>

Copy after login

Effect As shown in the picture:

CSS implements creative page loading (loading) animation effects

The above has shared with you a creative square loading (loading) page effect code. It is relatively simple. Beginners can practice it by themselves and take a look. Can you achieve the animation effect of page loading? I hope this article will be helpful to you!

【Recommended related tutorials】

1. CSS3 video tutorial
2. HTML video tutorial
3. bootstrap tutorial

The above is the detailed content of CSS implements creative page loading (loading) animation effects. For more information, please follow other related articles on the PHP Chinese website!