css - 需要为像骑士骑士灯泡这样的图像制作动画

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>

用它来调整你想要的时间。