Home > Article > Web Front-end > Super cool CSS3 loading animation effects
Brief Tutorial
This is a super cool CSS3 loading animation effect. The loading animation is produced using CSS3 CSS3 animation. The code is simple and the effect is very cool.
Usage method
HTML structure
Use a dc6dce4a544fdca2df29d5ac0ea9906b element as the container of the loading animation, which has two child elements. Among them, div.loading-1 is the loading progress bar. div.loading-2 is the loading text.
<div class="loader"> <div class="loading-1"></div> <div class="loading-2">Loading...</div> </div>
CSS Style
Three animations are used in this loading animation. The first loading animation is used to move the progress bar from 0 to 100%. The second turn animation is used to rotate the progress bar in the Y-axis direction. The third bounce animation is used for text bouncing.
.loader { width: 150px; margin: 50px auto 70px; position: relative; } .loader .loading-1 { position: relative; width: 100%; height: 10px; border: 1px solid #69d2e7; border-radius: 10px; animation: turn 4s linear 1.75s infinite; } .loader .loading-1:before { content: ""; display: block; position: absolute; width: 0%; height: 100%; background: #69d2e7; box-shadow: 10px 0px 15px 0px #69d2e7; animation: load 2s linear infinite; } .loader .loading-2 { width: 100%; position: absolute; top: 10px; color: #69d2e7; font-size: 22px; text-align: center; animation: bounce 2s linear infinite; } @keyframes load { 0% { width: 0%; } 87.5%, 100% { width: 100%; } } @keyframes turn { 0% { transform: rotateY(0deg); } 6.25%, 50% { transform: rotateY(180deg); } 56.25%, 100% { transform: rotateY(360deg); } } @keyframes bounce { 0%,100% { top: 10px; } 12.5% { top: 30px; } }
The above is the content of the super cool CSS3 loading animation special effects. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!