一款基于css3鼠標經過圓形旋轉特效

今天給大家分享一款基于css3鼠標經過圓形旋轉特效。當鼠標經過的時候圖片邊框顏色旋轉，圖片顯示詳情。該實例適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果圖如下：

在線預覽???源碼下載

實現的代碼。

html代碼：

 <div class="case-content"><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/1.jpg" alt="學習LOS" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題一</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/2.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題二</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/3.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題三</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/4.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題四</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/5.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題五</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/3.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題六</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/2.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題七</h3><p>好好學習，天天向上</p></div></div></a></div></div><div class="case-item"><div class="ih-item circle effect1"><a href="http://***/"><div class="spinner"></div><div class="img"><img src="images/1.jpg" alt="學習" height="200" width="200"></div><div class="info"><div class="info-back"><h3>標題八</h3><p>好好學習，天天向上</p></div></div></a></div></div></div>

via：http://***/Article/23952