藤藤每日一练——316 Icomoon Icon UI
经过一段时间的整理,Iconmoon Icon UI整理出来了,这个ICON UI总共具有316个不同的图标,所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似,如果你是初次接触,建议你先点击这里,阅读相关的文章。你会懂的。如果你知道是怎么一回事,那就继续往下吧,直接先浏览有什么样的图标,而且所有的图标,我们都配上了类名,使用时类名查询,就OK了。
![藤藤](https://static.fequan.com/vueconf/img/default_avatar.png)
经过一段时间的整理,Iconmoon Icon UI整理出来了,这个ICON UI总共具有316个不同的图标,所有图标都是通过@font-face来制作的。方法和前面介绍的制作Icon方法类似,如果你是初次接触,建议你先点击这里,阅读相关的文章。你会懂的。如果你知道是怎么一回事,那就继续往下吧,直接先浏览有什么样的图标,而且所有的图标,我们都配上了类名,使用时类名查询,就OK了。
站上放了好几个ICON UI,这些ICON UI其实没有特别之处,从效果上看,但他们具有一个共同点,都是使用@font-face来实现这些ICON的效果,而他们之间的区别是这些ICON都是使用了不同的字体。今天这个例子,藤藤给大家整理了一份163个Entypo ICON效果,希望大家喜欢,并能在项目中使用上。
关于@font-face制作ICON的技巧不在是技巧了,最主要的关键是如何得到这些icon的svg等字体文件,今天藤藤为大家整理了另外一个字体库“iconic”,这个字体库包含了172个常用的ICONl图标,希望大家喜欢。至于怎么制作,就不用我说了,因为站上这方面的案例和实现方法已经介绍很多篇了,如果你是第一次接触,你可以在搜索框中搜索“icon”,这样在w3cplus会给你呈现出你需要的icon制作方法教程与相关案例。那么到今天为止,藤藤在w3cplus上为大家共提供了五份有关于字体制作 icon图标的案例,有兴趣的围观吧。
这个ICON库工程真是浩大,其实藤藤整理出来是350个ICON,可是被我弄丢了五个,找不回来了,真是罪过罪过呀,实在找不回来的情况之下,我只好把她的350个ICON换成了一个345个ICON标题。这个345个ICON是由Branic字体库生成,可以说,你需要的ICON图标都基本上全了,有生活的、有工业的、有技术的等等,不信你自己看看。我是信了。(^_^),制作方法是不用了说,主要是大家苦于没有这样的字体库,那么现在我们给大家提供了,需要的就直接下载吧,不过转载的话,注明一下来源哟,别让我们辛苦过后一点余香都没了。
这个案例是一个登录后个人信息控制面板,包含了个人用户头像,整个信息面板以及一个退出按钮。其中最有特色的是信息面板的下拉菜单使用CSS3的animation、transform制作了一个动感十强的效果。
登录表单的案例,在w3cplus上已经有很多个,但我们一直没有放下这一块的效果制作,虽然结构与制作方法是类似的,但有很多效果实现的技巧还是略有差别,因为我们有一个目标,希望这上面展示的案例效果,能直接拿到项目中使用,另外一件事就是帮助有需要的同学在工作闲空时间学习CSS3的各种知识以及实战经验,来回馈广大前端人员一直对w3cplus的大力支持,希望大家喜欢。
这是一个使用CSS3中的transition和transform两个属性制作的一个动画下拉菜单效果,整个效果未采用任何js脚本代码,其中下接的折叠效果是通过transform的rotate来实现的,而transition是用来控制动画更具线性,当然这个效果也用到了transform的3d旋转属性,感兴趣的可以围观一下。扩大你自己的视野。
早期制作手风琴菜单都需要依赖于js的脚本来实现,自从CSS3出现后,制作这种效果不在需要依赖于任何脚本。另外实现手风琴效果的制作方法有很多种,但较为常见的是使用css3的“:target”选择器来实现。在本例中也是一样的,通过“:target”选择器来控制下接菜单的“max-height”,原理简单,方法也简单,只是细节处理稍加注意。
Accordion Slider 以前都是使用jQury或别的js脚本来制作,今天我们给大家展示一个纯CSS3实现的水平手风琴幻灯片播放的效果。这个效果有两个关键之处,第一是HTML结构中的input[type="radio"]是必备的,第二是样式通过radio的选中与未选中来控制对应的img显示和隐藏。这里采用的是css的兄弟元素选择器(~),这个是一个很好的应用。当然实现这种效果还可以通过“target”来实现,不过这种方法实现要借助js来显示默认的第一张图片,有兴趣的可以将这个案例改装一下。
Lavalamp Menu是一种很好的效果,早期在国外的博客中看到过这种效果,是通过jquery插件制作的,一开始还不知道这种效果就叫Lavalamp呢?后来为之告诉我的,今天使用CSS3写了一个垂直的Lavalamp的导航效果,这个效果其实很简单,主要是ribbons的制作要点功夫,然手就是选择器的使用,如果你掌握了这两个部分的知识,那么制作这个效果只是一个思路问题,看看代码你就知道了。