|
|
|
|
|
本文介紹4個漂亮的CSS3 Loading預(yù)加載動畫實例。
css代碼
#preloader_2{
position: relative;
left: 50%;
width: 40px;
height: 40px;
}
#preloader_2 span{
display:block;
bottom:0px;
width: 20px;
height: 20px;
background:#9b59b6;
position:absolute;
}
#preloader_2 span:nth-child(1){
-webkit-animation: preloader_2_1 1.5s infinite ease-in-out;
-moz-animation: preloader_2_1 1.5s infinite ease-in-out;
-ms-animation: preloader_2_1 1.5s infinite ease-in-out;
animation: preloader_2_1 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(2){
left:20px;
-webkit-animation: preloader_2_2 1.5s infinite ease-in-out;
-moz-animation: preloader_2_2 1.5s infinite ease-in-out;
-ms-animation: preloader_2_2 1.5s infinite ease-in-out;
animation: preloader_2_2 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(3){
top:0px;
-webkit-animation: preloader_2_3 1.5s infinite ease-in-out;
-moz-animation: preloader_2_3 1.5s infinite ease-in-out;
-ms-animation: preloader_2_3 1.5s infinite ease-in-out;
animation: preloader_2_3 1.5s infinite ease-in-out;
}
#preloader_2 span:nth-child(4){
top:0px;
left:20px;
-webkit-animation: preloader_2_4 1.5s infinite ease-in-out;
-moz-animation: preloader_2_4 1.5s infinite ease-in-out;
-ms-animation: preloader_2_4 1.5s infinite ease-in-out;
animation: preloader_2_4 1.5s infinite ease-in-out;
}
@-webkit-keyframes preloader_2_1 {
0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-webkit-keyframes preloader_2_2 {
0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-webkit-keyframes preloader_2_3 {
0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-webkit-keyframes preloader_2_4 {
0% {-webkit-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_1 {
0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes preloader_2_2 {
0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-moz-keyframes preloader_2_3 {
0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-moz-keyframes preloader_2_4 {
0% {-moz-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_1 {
0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes preloader_2_2 {
0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-ms-keyframes preloader_2_3 {
0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-ms-keyframes preloader_2_4 {
0% {-ms-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_1 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_2 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
@-keyframes preloader_2_3 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;}
50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
}
@-keyframes preloader_2_4 {
0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;}
50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
}
html代碼
<div id="preloader_2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css代碼
#preloader_3{
position:relative;
}
#preloader_3:before{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#9b59b6;
-webkit-animation: preloader_3_before 1.5s infinite ease-in-out;
-moz-animation: preloader_3_before 1.5s infinite ease-in-out;
-ms-animation: preloader_3_before 1.5s infinite ease-in-out;
animation: preloader_3_before 1.5s infinite ease-in-out;
}
#preloader_3:after{
width:20px;
height:20px;
border-radius:20px;
background:blue;
content:'';
position:absolute;
background:#2ecc71;
left:22px;
-webkit-animation: preloader_3_after 1.5s infinite ease-in-out;
-moz-animation: preloader_3_after 1.5s infinite ease-in-out;
-ms-animation: preloader_3_after 1.5s infinite ease-in-out;
animation: preloader_3_after 1.5s infinite ease-in-out;
}
@-webkit-keyframes preloader_3_before {
0% {-webkit-transform: translateX(0px) rotate(0deg)}
50% {-webkit-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {-webkit-transform: translateX(0px) rotate(0deg)}
}
@-webkit-keyframes preloader_3_after {
0% {-webkit-transform: translateX(0px)}
50% {-webkit-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {-webkit-transform: translateX(0px)}
}
@-moz-keyframes preloader_3_before {
0% {-moz-transform: translateX(0px) rotate(0deg)}
50% {-moz-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {-moz-transform: translateX(0px) rotate(0deg)}
}
@-moz-keyframes preloader_3_after {
0% {-moz-transform: translateX(0px)}
50% {-moz-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {-moz-transform: translateX(0px)}
}
@-ms-keyframes preloader_3_before {
0% {-ms-transform: translateX(0px) rotate(0deg)}
50% {-ms-transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {-ms-transform: translateX(0px) rotate(0deg)}
}
@-ms-keyframes preloader_3_after {
0% {-ms-transform: translateX(0px)}
50% {-ms-transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {-ms-transform: translateX(0px)}
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}
html代碼
<div id="preloader_3"></div>
css代碼
#preloader_4{
position:relative;
}
#preloader_4 span{
position:absolute;
width:20px;
height:20px;
background:#3498db;
opacity:0.5;
border-radius:20px;
-webkit-animation: preloader_4 1s infinite ease-in-out;
-moz-animation: preloader_4 1s infinite ease-in-out;
-ms-animation: preloader_4 1s infinite ease-in-out;
-animation: preloader_4 1s infinite ease-in-out;
}
#preloader_4 span:nth-child(2){
left:20px;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
-webkit-animation-delay: .8s;
-moz-animation-delay: .8s;
-ms-animation-delay: .8s;
animation-delay: .8s;
}
@-webkit-keyframes preloader_4 {
0% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; -webkit-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; -webkit-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-moz-keyframes preloader_4 {
0% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; -moz-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; -moz-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@-ms-keyframes preloader_4 {
0% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; -ms-transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; -ms-transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
@keyframes preloader_4 {
0% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
50% {opacity: 1; transform: translateY(-10px); background:#f1c40f; box-shadow: 0px 20px 3px rgba(0, 0, 0, 0.05);}
100% {opacity: 0.3; transform:translateY(0px); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);}
}
html代碼
<div id="preloader_4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
css代碼
#preloader6{
position:relative;
width: 42px;
height: 42px;
-webkit-animation: preloader_6 5s infinite linear;
-moz-animation: preloader_6 5s infinite linear;
-ms-animation: preloader_6 5s infinite linear;
animation: preloader_6 5s infinite linear;
}
#preloader6 span{
width:20px;
height:20px;
position:absolute;
background:red;
display:block;
-webkit-animation: preloader_6_span 1s infinite linear;
-moz-animation: preloader_6_span 1s infinite linear;
-ms-animation: preloader_6_span 1s infinite linear;
animation: preloader_6_span 1s infinite linear;
}
#preloader6 span:nth-child(1){
background:#2ecc71;
}
#preloader6 span:nth-child(2){
left:22px;
background:#9b59b6;
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-ms-animation-delay: .2s;
animation-delay: .2s;
}
#preloader6 span:nth-child(3){
top:22px;
background:#3498db;
-webkit-animation-delay: .4s;
-moz-animation-delay: .4s;
-ms-animation-delay: .4s;
animation-delay: .4s;
}
#preloader6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
-webkit-animation-delay: .6s;
-moz-animation-delay: .6s;
-ms-animation-delay: .6s;
animation-delay: .6s;
}
@-webkit-keyframes preloader_6 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes preloader_6_span {
0% { -webkit-transform:scale(1); }
50% { -webkit-transform:scale(0.5); }
100% { -webkit-transform:scale(1); }
}
@-moz-keyframes preloader_6 {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-moz-keyframes preloader_6_span {
0% { -moz-transform:scale(1); }
50% { -moz-transform:scale(0.5); }
100% { -moz-transform:scale(1); }
}
@-ms-keyframes preloader_6 {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-ms-keyframes preloader_6_span {
0% { -ms-transform:scale(1); }
50% { -ms-transform:scale(0.5); }
100% { -ms-transform:scale(1); }
}
@-ms-keyframes preloader_6 {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@keyframes preloader_6_span {
0% { transform:scale(1); }
50% { transform:scale(0.5); }
100% { transform:scale(1); }
}
html代碼
<div id="preloader6">
<span></span>
<span></span>
<span></span>
<span></span>
</div>