需要像骑士骑士灯泡一样制作动画

Question

我确实有上面的"png"图像.你能告诉我如何像骑士骑士灯泡一样动画它吗？我没有那么多关于动画的经验.任何帮助都将受到高度赞赏.

Answer 1

简单快速的样本就像:

i {
    display: inline-block;
    vertical-align:middle;
    width:10px;
    height:10px;
    border-radius:50%;
    background: red;
    -webkit-animation: kn 1.6s ease-in-out infinite;
    animation: kn 1.6s ease-in-out infinite;
}

i:nth-child(9){
    -webkit-animation-delay:0;
    animation-delay:0;
}
i:nth-child(8){
    -webkit-animation-delay:-0.2s;
    animation-delay:-0.2s;
}
i:nth-child(7){
    -webkit-animation-delay:-0.4s;
    animation-delay:-0.4s;
}
i:nth-child(6){
    -webkit-animation-delay:-0.6s;
    animation-delay:-0.6s;
}
i:nth-child(5){
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
}
i:nth-child(4){
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
}
i:nth-child(3){
    -webkit-animation-delay:-1.2s;
    animation-delay:-1.2s;
}
i:nth-child(2){
    -webkit-animation-delay:-1.4s;
    animation-delay:-1.4s;
}
i:nth-child(1){
    -webkit-animation-delay:-1.6s;
    animation-delay:-1.6s;
}

@-webkit-keyframes kn {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity:0.1;
    }
}

@keyframes kn {
    0% {
        opacity: 0.1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity:0.1;
    }
}

<div> 
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</div>

玩它来使你想要的时间.