CSS3提供了豐富的動畫效果,其中之一就是閃爍效果。實現閃爍效果的方式一般是通過動畫和關鍵幀來實現。
/* 設置關鍵幀 */ @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* 應用動畫 */ div { animation: blink 1s linear infinite; } /* 上面的代碼實現了一個簡單的閃爍效果。*/ /* 設置關鍵幀 */ @keyframes multi-blink { 0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 1; } } /* 應用動畫 */ div { animation: multi-blink 1s linear infinite; } /* 上面的代碼實現了一個多次閃爍的效果。*/ /* 設置關鍵幀 */ @keyframes color-blink { 0% { background-color: red; } 50% { background-color: blue; } 100% { background-color: green; } } /* 應用動畫 */ div { animation: color-blink 1s linear infinite; } /* 上面的代碼實現了一個顏色閃爍的效果。*/
使用CSS3實現閃爍效果非常簡單,只需要設置好關鍵幀和動畫即可。在實際開發中,可以通過多種方式優化和擴展閃爍效果,如添加其他動畫效果、使用JavaScript控制動畫播放等等。
上一篇html 表格行距設置