需要動畫的圖像像霹靂遊俠燈泡

Question

我有上面的「PNG」 image.Can你告訴我如何動畫它像一個霹靂遊俠燈泡的方式？我沒有那麼多的關於動畫的經驗。任何幫助將不勝感激。

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>

玩它讓你想要的時間。