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

Home

Web Front-end

CSS Tutorial

CSS implements creative page loading (loading) animation effects

yulia

Oct 20, 2018 am 10:48 AM

cssloadingPage loading

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>

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn