CSS動畫是現代Web設計中必不可少的一部分。好的動畫可以為網頁增添生氣和活力,而黑暗風格的動畫在近些年也越來越受歡迎。下面,我們就來看一下如何使用CSS實現黑暗風格的動畫特效。
.dark { background-color: #121212; color: #ffffff; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .dark button { border: 2px solid #ffffff; background-color: transparent; color: #ffffff; padding: 12px 24px; border-radius: 10px; animation: pulse 1s ease-in-out infinite; } .dark button:hover { background-color: #ffffff; color: #121212; }
在上述代碼中,我們使用了.dark類來定義整個頁面的黑暗風格。在按鈕上,我們使用了一個名為pulse的關鍵幀動畫來實現按鈕的閃爍效果。在.hover偽類中,我們將背景顏色和文字顏色進行了反轉。
除了這個閃爍效果之外,我們還可以使用CSS實現其他黑暗風格的動畫,比如漸隱漸現的效果、文字逐漸變色的效果等等。
總之,黑暗風格的動畫特效可以讓網頁更加炫酷和吸引人。希望上述的代碼可以幫助大家實現自己的黑暗風格動畫特效。