100多个纯CSS动画图标

Posted 2020-07-26

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

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

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

图标样式图片

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

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

加入了鼠标放上的样式。

改变了颜色

a:hover {

  color: #fff;

}

透明度和大小

span:hover {

  transform: scale(1.5);

}

span:hover i {

  opacity: 0.8;

}

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

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

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

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

使用起来简单方便。

好东西自己拿。

示例和框架文件下载地址：点击进入下载代码获取。

本文出自 “11722655” 博客，请务必保留此出处http://11732655.blog.51cto.com/11722655/1789549