标签归档:图标

纯CSS3实现iOS 7扁平化图标

说实话一开始我并不喜欢iOS 7那种扁平化的风格,更加觉得iOS 7的那些图标非常烂。但是现在看习惯了iOS 7的图标,还是挺清新的。今天我们要用纯CSS3来实现iOS 7扁平化的图标,没有使用图片,纯CSS3绘制而成,工程量是浩大了点,不过相仿度还是挺高的哈。

css3-ios-7-icon

在线演示源码下载

150多个纯CSS3动画SVG图标

CSS3真的很强大,但SVG的实力也不容小觑,今天我们要将它们两个有机结合,分享给大家150多个非常有趣的纯CSS3动画SVG图标。这150个SVG图标中,都拥有鼠标滑过的动画特效,有的是阴影特效,也有的是动感的动画,这些图标真的很酷。

150-css3-svg-icons

在线演示源码下载

SVG实现镂空动画图标 可填充颜色

这是一款基于SVG的镂空动画图标,图标的绘制是通过SVG的path标签实现的,本示例展示3个不同的东西,篮球、twitter logo和一个猪头。鼠标滑过图标时,图标镂空的部分将会以渐变的方式填充一种颜色,效果非常不错。

svg-stroke-icon

在线演示源码下载

一套HTML5/SVG表情图标 表情超可爱

这次我们要来向大家分享一款超级可爱的HTML5/SVG表情图标,一共有12组不同的表情,这些表情都是利用SVG Path绘制而成,对SVG熟悉的朋友应该觉得比较简单,但是这些表情的创意确实非常不错,你可以将这些svg表情应用到你的博客上去,非常可爱。

html5-svg-face-icon

在线演示源码下载

CSS3/SVG质感背景小图标 镂空效果图标按钮

之前我们分享过很多利用CSS3制作的图标小按钮,比如一些分享按钮,如纯CSS3社会化分享按钮,还有一些带小图标的CSS3菜单,如HTML5/CSS3滑块动画菜单 图标动画很酷。今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。

svg-icons-with-patterns

在线演示源码下载