在移动端Web项目开发中,我们往往需要用到一些小图标,比如搜索,返回,小菜单,小箭头等等..这如果还用切图你就OUT了.. 而这时CSS3提供的字体图标无疑是我们最好的选择,它就像字体一样,可以设置大小,颜色等样式,美滋滋. 而阿里巴巴矢量图标库 ,各个设计师们为我们制作了海量的小图标,任君选择  截至目前2017.12.8日 已经拥有了约185万个图标 链接:http://www.iconfont.cn/ 好了,进入正题. 第一步:打开上述链接 ,进入图标库,哦对了,还得登陆,然后在图标库右上

最近在研究icon font图标字库,觉得很有意思,于是找了一些比较好的在线字库.大都是开源的,而且各有特色,推荐给大家! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello http://fontello.com/ 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的. icomoon http://ico

@-webkit-keyframes bird{ 0% { -moz-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); -ms-transform: translate(0, 0); transform: translate(0,0); } 25% { -moz-transform: translate(0,-10px); -webkit-transform: t

基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8 ▣ 9635 25A3 标点,特殊符号 « 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D ‘ 8216 2018

原始地址:http://segmentfault.com/a/1190000000481320 出处:http://www.zhangxinxu.com/wordpress/?p=4113

在线演示 本地下载

全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.htm 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css"> <div><i class="icono-mai

一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5之canvas 二.    CSS3 CSS3简介 CSS3有什么(边框.圆角.背景.渐变.文本效果.字体.2D转换.3D转换.过渡.动画.多列.用户界面.图片.按钮.分页.框大小.弹性盒子.多媒体查询) 三.    jQuery与CSS3选择器(详见PDF文档) 注:部分实例见分享会文件demo.

一.    HTML5 为什么需要HTML5 什么是HTML5 HTML5现状及浏览器支持 HTML5优点与缺点 HTML5语法规则与文档声明 HTML5新增表达标签 HTML5多媒体组件 HTML5之canvas 二.    CSS3 CSS3简介 CSS3有什么(边框.圆角.背景.渐变.文本效果.字体.2D转换.3D转换.过渡.动画.多列.用户界面.图片.按钮.分页.框大小.弹性盒子.多媒体查询) 三.    jQuery与CSS3选择器(详见PDF文档) 注:部分实例见分享会文件demo.

HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3创意Loading加载动画 今天要来分享一款非常具有创意的CSS3 Loading动画效果,整个Loading动画就像一部开足马力的发动机,在不停地循环工作,看上去Loading动画样式十分新颖.之前我们也分享过一些创意型的Loading动画,比如:HTML5 Canvas发光Loading动画 在

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

一.currentColor-简介 currentColor顾名思意就是“当前颜色”,准确讲应该是“当前的文字颜色”,例如: .xxx { border: 1px solid currentColor; } 二.currentColor的使用与表现 上面提到,currentColor表示“当前的标签所继承的文字颜色”.可能一下子蒙圈了,还是上代码的好,CSS代码如下:

现在大部分网页的按钮都是经过美化的,那些原始的浏览器按钮太过于枯燥乏味,让用户失去和网站交互的兴趣.早期我们都是通过背景图片来美化网页按钮,而现在我们可以利用扩展性更好的CSS3来制作漂亮的网页按钮,本文是jQuery/CSS3按钮系列插件的第一篇,希望大家会喜欢. 超可爱的CSS3 3D按钮 这款CSS3按钮相当具有创意,它的外观很独特,非常适合个性化的个人博客上,可以用来制作评论提交按钮或者简单的交互行为按钮,个人非常喜欢它. DEMO演示        源码下载 纯CSS3实现分享按钮 这

[IT名人堂]专访百分点研发总监:不止于平台,大数据操作系统重磅来袭! [2015-8-11 14:17:04] [IT名人堂]专访1号店技术总监:大型电商网站的IT架构 [2015-8-25 15:08:57] 跨行转账或将收费 支付宝免费转账或将成为历史 社会新闻 新华网 2015-08-28 16:23:18 回顾一年的IT学习历程与大学生活 swift项目实战FoodPin目录 javascript 客户端验证和页面特效制作 学习笔记 CSS3图标图形生成技术个人攻略 « 张鑫旭-鑫空间

http://www.wuweierwei.com/ 个人网站 http://www.yyyweb.com/demo/icons-filling/index.html CSS3图标填充效果 http://www.alnanaluminium.com/ 南铝企业网站 http://nec.netease.com/ 网易NEC http://down.admin5.com/texiao/ a5JS特效源码 http://www.yyyweb.com/ 前端里

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

CSS十问——好奇心+刨根问底=CSSer   最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

最近有时间,想把酝酿的几篇博客都写出来,今天前端小学生带着10个问题,跟大家分享一下学习CSS的一些体会,我觉得想学好CSS,必须保持一颗好奇心和刨根问底的劲头,而不是复制粘贴,得过且过.本人能力有限,这篇文章从构思加完成用了四五天,如果你和我一样是前端小白,不妨仔细斟酌体会,以期领悟到一些东西:如果你是业界大牛,也请你驻足随意瞄上两眼,把言辞内容不妥的地方指出来,我们共同讨论. 时刻保持好奇心 第一问:当margin的值为百分比形式时,为什么浏览器会根据父容器宽度得出计算值? 在我之前一篇博客

本人是HTML5-CSS3初学者,这次分享一款纯CSS3实现的图片动画,当鼠标滑过小图标时,图标会放大,同时图标会出现旋转的动画效果.我们在很多个性化个人博客中经常看到鼠标滑过人物头像后头像图片旋转就是利用这种方法实现的.由于只用到CSS3,所以实现的代码比较简单. //附上代码 <!doctype html><html><head> <meta charset="utf-8"> <title>CSS3鼠标滑过图标放大旋转动画