码迷,mamicode.com
首页 > Web开发 > 详细

100多个纯CSS动画图标

时间:2016-06-16 00:13:46      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:html5 css 编程

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

那么只要套用这个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

100多个纯CSS动画图标

标签:html5 css 编程

原文地址:http://11732655.blog.51cto.com/11722655/1789549

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!