yomao

---恢复内容开始---

我们在做页面开发的时候,可能要用到许多的小图标样式。

那么只要套用这个CSS的图标框架,在加上一些修饰,就可以得到非常棒的图标样式,

下面我们来看一下这些图标的样式。

图标样式图片

首先我们要引用写好的CSS文件,也就是框架 Icono.min.js

然后可以自己在样式上面做一些其他的修改,在我们这个图标展示当中,

加入了鼠标放上的样式。

改变了颜色​

a:hover {

  color: #fff;

}

 

透明度和大小

span:hover {

  transform: scale(1.5);

}

span:hover i {

  opacity: 0.8;

}

实现图标的显示的时候要用标签 i 来进行实现,

不然样式会变形,也就是说需要在标签 i  当中添加类名​

"​>  这样就可以成功在页面显示出小图标样式。

而且有些小图标还带有动画效果。

使用起来简单方便。​

好东西自己拿。

示例和框架文件下载地址: http://www.h5edu.cn/index.php?c=index&a=step&lessonid=69 获取代码

 

分类:

技术点:

相关文章: