在前端開發中，我們經常需要通過動態效果來提升用戶體驗度。今天，我們將來介紹一種簡單的CSS技巧：圖片閃爍效果。

/* 圖片閃爍 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
img:hover {
animation: blink 1s infinite;
}

首先，我們使用@keyframes定義了一組blink的動畫效果，分別設置了三個狀態：0%，50%，100%。狀態0%和100%都將圖片的透明度設置為1，中間的50%則將圖片透明度設置為0.5，形成了閃爍的效果。

接下來，在img標簽上使用了hover偽類，意味著這種效果只會在鼠標懸停在圖片上時才會出現。最后，通過animation屬性將blink動畫效果應用到上面，設置了1秒的間隔時間，無限循環。

這種技巧特別適合一些響應式網站，比如圖片展示，博客列表，新聞滑動等等。它不僅簡單易懂，而且非常好看！試試吧！