divcss制作鼠標經過圖標動畫效果的方法

大家知道divcss制作鼠標經過圖標動畫效果嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。

簡單的動畫效果示例

這只是本文章中的其中一個示例(6)，主要的效果是旋轉動畫。

.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px rgba(255,255,255,1); transition: background 0.2s, color 0.2s; }

.no-touch .hi-icon-effect-6 .hi-icon:hover { background: rgba(255,255,255,1); color: #64bb5d;}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: spinAround 2s linear infinite;}

@keyframes spinAround { from { transform: rotate(0deg) } to { transform: rotate(360deg); }}

上面的代碼，只要你熟悉transitions和animations這兩個標簽，那就很容易理解。當鼠標經過.hi-icon-effect-6 .hi-icon時背景變成白色rgba(255,255,255,1)，然後附帶動畫旋轉transform: rotate()360度。其他的示例，大家可以下載附件，好好的看看其中的代碼。

相信大家已經學會divcss制作鼠標經過圖標動畫效果了吧!感謝大家對我們網站的支持!

相關推薦：

css三行兩列代碼是什麼呢