CSS3提供了許多動畫效果,其中包括閃動效果。閃動效果可以使某些元素在頁面上引人注目。
.shake { animation: shake 0.5s ease-in-out infinite; transform-origin: center; } @keyframes shake { 0% { transform: rotate(0deg); } 10% { transform: rotate(10deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
要使用閃動效果,我們可以使用CSS3動畫和關鍵幀。在上述代碼中,我們定義了一個名為“shake”的類,并為該類設置了動畫和動畫的屬性。
在我們的關鍵幀中,我們定義了元素旋轉的度數和時間間隔,在關鍵幀的末尾將元素恢復到原始狀態。
我們可以將這個類應用到一個元素,并使它開始閃動。要注意的是,我們必須為該元素設置一個原點,以便它在旋轉時根據中心點進行旋轉。
通過使用這個簡單的CSS3代碼,我們可以在網站上添加一個引人注目的閃動效果,以吸引用戶的注意力。
下一篇mysql查看連接事務