菊花状的loading动画

作者: 瓜田猹 | 来源:发表于2017-09-20 18:08 被阅读72次

菊花状的loading动画
面试
NVActivityIndicatorView
loading...
好玩的CSS动效~
android仿IOS 旋转菊花Loading、等待Loadin
Vue第三方插件使用
如何在 Mac 上实现环形 loading 动画
Flutter Animations动画效果合集(全网最全)
Flutter Loading菊花

1505901997(1).png

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1,minimum-scale=1">
        <title>菊花状的Loading效果</title>
        <link rel="stylesheet" href="css/loadingLine.css" />
    </head>
    <body>
        <div class="loading">
            <div class="loading-box">
                <i class="fade-item fade-item1"></i>
                <i class="fade-item fade-item2"></i>
                <i class="fade-item fade-item3"></i>
                <i class="fade-item fade-item4"></i>
                <i class="fade-item fade-item5"></i>
                <i class="fade-item fade-item6"></i>
                <i class="fade-item fade-item7"></i>
                <i class="fade-item fade-item8"></i>
                <i class="fade-item fade-item9"></i>
                <i class="fade-item fade-item10"></i>
                <i class="fade-item fade-item11"></i>
                <i class="fade-item fade-item12"></i>
            </div>
        </div>
    </body>
</html>

样式

.loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 50% auto;
    width: 60px;
    height: 60px;
}
.loading .loading-box { 
    position: relative;
    width: 70px;
    height: 70px;
    background-color: rgba(0,0,0,.4);
    border-radius: 4px;
}
.loading .loading-box .fade-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    margin:10px 0px 0px 10px;
}
.loading .loading-box .fade-item:before{
    content: "";
    display: block;
    margin: 0 auto;
    width: 4px;
    height: 14px;
    background-color: #fff;
    border-radius:4px;
    -webkit-border-radius: 4px;
}
.loading .loading-box .fade-item2{
    transform: rotate(30deg);
} 
.loading .loading-box .fade-item3{
    transform: rotate(60deg);
} 
.loading .loading-box .fade-item4{
    transform: rotate(90deg);
} 
.loading .loading-box .fade-item5{
    transform: rotate(120deg);
} 
.loading .loading-box .fade-item6{
    transform: rotate(150deg);
} 
.loading .loading-box .fade-item7{
    transform: rotate(180deg);
} 
.loading .loading-box .fade-item8{
    transform: rotate(210deg);
} 
.loading .loading-box .fade-item9{
    transform: rotate(240deg);
} 
.loading .loading-box .fade-item10{
    transform: rotate(270deg);
} 
.loading .loading-box .fade-item11{
    transform: rotate(300deg);
} 
.loading .loading-box .fade-item12{
    transform: rotate(330deg);
} 
.loading .loading-box .fade-item:before{
    animation: fadeDelay 1.2s infinite ease-in-out both;
}
.loading .loading-box .fade-item2:before{
    animation-delay: -1.1s;  //注意animation-delay负值指跳过1.1s进入动画
}
.loading .loading-box .fade-item3:before{
    animation-delay: -1s;
}
.loading .loading-box .fade-item4:before{
    animation-delay: -0.9s;
}
.loading .loading-box .fade-item5:before{
    animation-delay: -0.8s;
}
.loading .loading-box .fade-item6:before{
    animation-delay: -0.7s;
}
.loading .loading-box .fade-item7:before{
    animation-delay: -0.6s;
}
.loading .loading-box .fade-item8:before{
    animation-delay: -0.5s;
}
.loading .loading-box .fade-item9:before{
    animation-delay: -0.4s;
}
.loading .loading-box .fade-item10:before{
    animation-delay: -0.3s;
}
.loading .loading-box .fade-item11:before{
    animation-delay: -0.2s;
}
.loading .loading-box .fade-item12:before{
    animation-delay: -0.1s;
}
@keyframes fadeDelay{
    0%, 39%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}
@-webkit-keyframes fadeDelay{
    0%, 39%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}