简单的圆形图标鼠标hover效果 | CSS3教程

演示

本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果。这种效果在不少时尚的酷站上都有。本教程中的例子主要是利用在

a

元素的伪元素上使用CSS transitions和animations来制作。图标的创建将使用IcoMoon app来完成。

注意：不是每一个浏览器都支持伪元素，最好是使用Chrome或Firefox浏览器观看。

HTML结构:

图标组的结构是使用一个

div

包含一组

a

元素，给每个

a

元素设置图标class。

CSS样式：

下面的样式是鼠标hover时，圆形图标旋转的效果。

注意：第四个例子中使用伪元素制作虚线边框的效果在FF 21.0中看不到效果。

其它各种效果请参考下载的css文件，都非常简单。

本教程就到这里，希望对你有所帮助。

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141028314.html