CSS3 animation implements 5 preload animation effects
Mar 22, 2017 pm 02:51 PMAchieve the animation effect as shown in the picture:
Preload animation 1: Double rotating circle
A circle rotating in two different directions. We define a CSS code for the speed of the inner ring, that is, the speed of the inner ring is 2 times faster than that of the outer ring.
The implementation is shown in the figure:
html code:
<body style="background: #ffb83c;"> <p id="preloader-1"> <span></span> <span></span> </p> </body>
css code:
#preloader-1{ position: relative; } #preloader-1 span{ position: absolute; border:8px solid #fff; border-top:8px solid transparent; border-radius: 999px; } #preloader-1 span:nth-child(1){ width:80px; height: 80px; animation: spin-1 2s infinite linear; } #preloader-1 span:nth-child(2){ top:20px; left:20px; width:40px; height: 40px; animation: spin-2 1s infinite linear; } @keyframes spin-1{ 0%{transform: rotate(360deg); opacity: 1.0;} 50%{transform: rotate(180deg); opacity: 0.5;} 100%{transform: rotate(0deg);opacity: 0;} } @keyframes spin-2{ 0%{transform: rotate(0deg); opacity: 0.5;} 50%{transform: rotate(180deg); opacity: 1;} 100%{transform: rotate(360deg);opacity: 0.5;} }
Preload animation two: staggered circle
The two circles move back and forth horizontally. Each circle has its own reverse movement animation parameters set.
Effect:
html code:
<body style="background: #4ad3b4;"> <p id="preloader-2"> <span></span> <span></span> </p> </body>
css code:
#preloader-2{ position: relative; } #preloader-2 span{ position: absolute; width:30px; height: 30px; background: #fff; border-radius: 999px; } #preloader-2 span:nth-child(1){ animation: cross-1 1.5s infinite linear; } #preloader-2 span:nth-child(2){ animation: cross-2 1.5s infinite linear; } @keyframes cross-1{ 0%{transform: translateX(0); opacity: 0.5;} 50%{transform: translateX(80px); opacity: 1;} 100%{transform: translateX(0);opacity: 0.5;} } @keyframes cross-2{ 0%{transform: translateX(80px); opacity: 0.5;} 50%{transform: translateX(0); opacity: 1;} 100%{transform: translateX(80px);opacity: 0.5;} }
Preload animation three: rotating circle
Effect:
html code:
<body style="background: #ab69d9;"> <p id="preloader-3"> <span></span> </p> </body>
css code:
#preloader-3{ position: relative; width:80px; height: 80px; border:4px solid rgba(255,255,255,.25); border-radius: 999px; } #preloader-3 span{ position: absolute; width:80px; height:80px; border:4px solid transparent; border-top:4px solid #fff; border-radius: 999px; top:-4px; left:-4px; animation: rotate 1s infinite linear; } @keyframes rotate{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} }
Preload animation four: jumping circle
This is a Mexican wave pattern animation The effect is achieved by setting the delay parameters between different circles.
Effect:
html code:
<body style="background: #c1d64a;"> <p id="preloader-4"> <span></span> <span></span> <span></span> <span></span> <span></span> </p> </body>
css code:
#preloader-4{ position: relative; } #preloader-4 span{ position:absolute; width:16px; height: 16px; border-radius: 999px; background: #fff; animation: bounce 1s infinite linear; } #preloader-4 span:nth-child(1){ left:0; animation-delay: 0s; } #preloader-4 span:nth-child(2){ left:20px; animation-delay: 0.25s; } #preloader-4 span:nth-child(3){ left:40px; animation-delay: 0.5s; } #preloader-4 span:nth-child(4){ left:60px; animation-delay: 0.75s; } #preloader-4 span:nth-child(5){ left:80px; animation-delay: 1.0s; } @keyframes bounce{ 0%{transform: translateY(0px);opacity: 0.5;} 50%{transform: translateY(-30px);opacity: 1.0;} 100%{transform: translateY(0px);opacity: 0.5;} }
Preload animation five: radar circle
A kind of radar For the radiation effect, set the same fade-in and fade-out effect for three span elements
, and then delay each one slightly to achieve it.
Effect:
html code:
<body style="background: #f9553f;"> <p id="preloader-5"> <span></span> <span></span> <span></span> </p> </body>
css code:
#preloader-5{ position: relative; } #preloader-5 span{ position:absolute; width:50px; height: 50px; border:5px solid #fff; border-radius: 999px; opacity: 0; animation: radar 2s infinite linear; } #preloader-5 span:nth-child(1){ animation-delay: 0s; } #preloader-5 span:nth-child(2){ animation-delay: 0.66s; } #preloader-5 span:nth-child(3){ animation-delay: 1.33s; } @keyframes radar{ 0%{transform: scale(0);opacity: 0;} 25%{transform: scale(0);opacity: 0.5;} 50%{transform: scale(1);opacity: 1.0;} 75%{transform: scale(1.5);opacity: 0.5;} 100%{transform: scale(2);opacity: 0;} }
Related articles:
How to use HTML5 Canvas produces 3D animation effects
HTML5 Canvas animation effect graphic code demonstration
css3 animation effect summary analysis
The above is the detailed content of CSS3 animation implements 5 preload animation effects. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute

Making Your First Custom Svelte Transition

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

File Upload With Multer in Node.js and Express

Best CSS Animations and Effects on CodeCanyon 2025 (Paid Free)
