Pre-loaded animation one: Double spin ring
A circle that rotates in two different directions. The speed of our inner circle defines a CSS code that is twice times faster than the outer ring rate.
Realize:
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;}}Pre-loaded Animation II: Staggered loops
Two circles are staggered and moved back and forth in a horizontal direction. Each circle is set with a separate inverse motion animation parameter.
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;}}Pre-loaded animation three: rotating ring
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);}}Pre-loaded animation four: Bounce Circle
This is an animated effect of the Mexican wavy pattern, which is achieved by setting the delay parameters between the 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;}}Pre-loaded animation five: Radar ring
A radar radiation effect that span elements sets the same fade-out effect to 3, which can be achieved with a slight delay.
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;}}More CSS3 animations (i): 5 pre-loaded animation effects related articles please follow topic.alibabacloud.com!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
