当前位置：美工之家 > 教程 > html+css教程 > 4个漂亮的CSS3 Loading预加载动画实例
runslyrunsly html+css教程

4个漂亮的CSS3 Loading预加载动画实例

本文介绍4个漂亮的CSS3 Loading预加载动画实例。

实例一

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>

execcodegetcode

实例二

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>

execcodegetcode

实例三

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>

execcodegetcode

实例四

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>

execcodegetcode

相关文章推荐

  • CSS3 Loading 旋转圆盘加载动画
  • CSS3 loading 音波效果预加载动画
  • 纯css3音阶波浪loading加载动画效果【源码下载】
  • CSS3 Loading预加载动画8个常见实例
  • CSS Loading 左右滚动加载动画等5实例【源码下载】
2021服务器优惠

阿里云：2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...
腾讯云：云产品限时秒杀，爆款1核2G云服务器，首年74元 更多...

runsly

runsly 钻石

相关推荐