CSS是前端開發中常用的樣式表語言,它可以為網頁增加動態效果并提高用戶體驗。其中,旋轉運動模糊是一種常見的特效,可以為網頁增加動感和活力。下面我們就來介紹一下如何使用CSS實現旋轉運動模糊。
/* 定義關鍵幀 */ @keyframes rotate { from { transform: rotate(0deg); filter: blur(0); } to { transform: rotate(360deg); filter: blur(4px); } } /* 應用關鍵幀 */ img { animation: rotate 1s linear infinite; }
以上代碼中,我們首先定義了一個名為rotate的關鍵幀。在from中,我們將圖片元素的旋轉角度設為0度,模糊度設置為0。在to中,我們將圖片元素的旋轉角度設為360度,并將模糊度設置為4像素。在動畫中,我們將關鍵幀rotate應用于圖片元素,設置線性動畫、無限循環。
通過以上的代碼,我們就可以實現一張圖片的旋轉運動模糊效果。對于其他元素,也可以通過設置不同的動畫長度和模糊度來實現類似的效果。