怎麼實現滑鼠經過圖示動畫效果

　　學習前端的小夥伴們你知道滑鼠經過圖示動畫效果如何實現嗎?不知道的話跟著小編一起來學習標經過圖示動畫效果怎麼實現把。

　　今天就為大家分享一組時尚而簡單的滑鼠經過圖示動畫效果。

　　構建HTML基本結構

　　在本示例當中用到的HTML結構極其簡單，在一個大的div容器中放了幾個描文字，通過css的樣式控制就可以製作出多種效果出來，如下：

　　Mobile Desktop Partners Support Security

　　簡單的動畫效果示例

　　這只是本文章中的其中一個示例***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 . { background: rgba***255,255,255,1***; color: #64bb5d;}

　　.no-touch .hi-icon-effect-6 . { 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度。其他的示例，大家可以下載附件，好好的看看其中的程式碼。

實現滑鼠經過圖示動畫效果