文档章节

100多个纯CSS动画图标

哟猫Intry
 哟猫Intry
发布于 2016/06/15 16:42
字数 292
阅读 27
收藏 0

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

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

下载代码获取。

© 著作权归作者所有

共有 人打赏支持
哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi
2017/11/20
0
0
令人难以置信的纯 CSS3 图标

尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Loui...

古欣
2010/09/13
1K
6
大爱HTML5 9款超炫HTML5最新动画源码

我们分享过很多漂亮的HTML5动画,包括CSS3菜单、HTML5 Canvas动画等。今天我们精选了9款非常不错的超炫HTML5最新动画及其源码,一起来看看。 1、HTML5可爱的404页面动画 很逗的机器人 很久以...

ruby_chen
2014/04/02
5.1K
5
Html5添加SVG和Raphaël.js的混合图标动画特效插件教程

一、安装 可以通过npm或bower来安装Hybicon插件。 $npm install hybicon $bower install hybicon 二、使用方法 使用Hybicon图标动画插件需要引入raphael.min.js和hybicon.min.js文件。 <scr...

大街小巷
2016/01/04
47
0
7 个超级震撼的 CSS3 按钮组合

我们可以用精美的背景图片和CSS代码制作出非常漂亮的按钮,但在某些特殊的页面上,或者你需要让按钮更有动感从而让你的用户眼前一亮,那么就试试 用CSS3技术吧,CSS3新增的很多属性能让按钮具...

tp_wire
2012/06/30
9.7K
28

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部