Home > Article > Web Front-end > HTML+CSS realizes page loading (loading) animation effect
Have you ever encountered a situation where the page is loading when browsing the page? As a front-end developer, do you know how to use CSS3 and HTML to create a page loading animation effect? This article will share with you a super simple and practical CSS3 circle loading animation effect code. It has certain reference value and interested friends can take a look.
To implement loading loading animation, you need to use many attributes and HTML tags in CSS3, such as: animation animation, display, border-radius rounded corners, transform attribute, etc. If you are not sure, you can Check out my previous articles, which have been introduced before, or visit CSS3 Video Tutorial.
Example demonstration: Use three circles to create a page loading animation effect. The circles change from hiding to appearing and then to hiding. The specific code is as follows:
HTML part:
<div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div>
CSS3 part:
.spinner { margin: 100px auto 0; width: 150px; text-align: center; } .spinner > div { width: 30px; height: 30px; background-color: #67CF22; border-radius: 100%; display: inline-block; -webkit-animation: bouncedelay 1.4s infinite ease-in-out; animation: bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } }
The effect is as shown in the figure:
The above introduces the method of CSS3 to achieve page loading animation effect. In the project It is used a lot. You can use it directly, or you can modify it to the style you like. I hope this article will be helpful to you!
【Recommended related tutorials】
1. HTML Video Tutorial
2. CSS3 Online Manual
3. bootstrap tutorial
The above is the detailed content of HTML+CSS realizes page loading (loading) animation effect. For more information, please follow other related articles on the PHP Chinese website!