没出现css动画效果之前要实现动的图标,一般都是插入一张gif的图片去实现,随着CSS3技术的流行,现在越来越多比较高级炫酷的网页效果呈现,今天用css代码实现一组天气网站常用到的图标!
如下:
预览起来是可以动起来的,这里只截静态图片!
实现方法
html结构:
css样式:
在进行前端开发时,图标库的使用是一项必须掌握的技巧,目前流行的图标库有fontawesome,iconfont等,只需要引入到项目中,然后使用对应的class,就会得到对应的图标。
但是你们有没有想过,如果是自己的话该怎么去实现这些图标呢?今天我们就来看看一些稍微复杂的图标是如何使用纯CSS3实现吧。
文中的代码已经放到github上了,感兴趣的同学自取。
https://github.com/zhouxiongking/article-pages/blob/master/articles/border/complexFigure.html
CSS3
我们可以先来看看稍微复杂的图标的样子。
图标库
从图标中可以看出,都是平时很常用的正确,错误,方向键,放大,缩小,开锁,解锁等。
我们从中抽取几个,慢慢分析它们是如何实现的吧。
水杯的图标如下所示。
水杯图标
我们对水杯图标进行拆分,分为杯身和杯柄两个部分。
杯身中的白色长方形就是一个div,设置宽度和高度。
杯身的四周为黑色都是通过border实现,border-bottom比其他三个放向都要大。
杯身的下方是圆角,通过border-radius设置,border-radius的右下和左下方向设置相同的值。
通过上述的分析,我们可以得到杯身部分的CSS代码。
杯身CSS代码
杯柄通过伪元素:before实现。
杯柄设置为绝对定位,修改right值让中间出现一个空白。
调整杯柄位置的宽度,只需要和杯身重叠即可。
杯柄右上角和右下角的border-radius设置为特定的值,展现成圆角的样子。
通过以上的分析,我们可以得到杯柄部分的CSS代码。
杯柄CSS代码
首先我们来看看心形图案的样子。
心形图案
接下来我们同样将整个图案拆分来看,分成左右两个部分,我们将上述图案换成两种不同颜色就一目了然了。
拆分图案
从图案中可以看出,它实际是由两个相同的图行旋转不同的角度构成,相同的元素部分,可以通过设置border-radius值来实现。
我们将左右两个半边的形状分别通过:before和:after来实现,原始的的div形状的CSS属性则很简单,只需要设置相对位置和宽度为0即可。
基本CSS属性
然后看看:before和:after共有的属性,主要是保证为元素部分的定位为绝对定位,然后设置border-radius的值, 保证上半部分是圆角。
共有CSS属性
然后是关键的两半边各自的CSS属性。左侧的图形距左边应该为0,所以left: 0,右侧的图形距右侧为0,所以right: 0。
各有的CSS属性
同时左右两侧图案需要进行旋转,这里我们选择旋转48度,这是为什么呢?
很多人一下子可能会想到旋转45度,我们来看看旋转45度时的样子。
旋转45度
从图形中可以看出,两侧有棱角,整个图案就显得不标准,当旋转超过45度时,棱角的部分就会被里面的图案遮住。
所以这里我们选择旋转48度,达到最终的效果。
最终效果图
今天这篇文章我们使用纯CSS3的属性画出了一个杯子和心形两个稍微复杂点的图案,其实其它图案也是类似的,只要我们能将其拆分,每个部分独立实现,再组合就可以达到图标库的效果了。
大家也可以自己动手实现一下噢~
、需求展示
如图所示,图中网站的购物车小图标漂亮简约,如何简单快速实现呢?
网站中购物车小图标
二、实战演武
(一)字体图标准备
提前前往字体图标网站下载好字体图标文件(iconfont),并存放在项目文件中
字体图标文件目录
(二)代码准备
以下为提前准备好的顶部导航栏代码,分为左右两部分,其中右边的购物车栏目前需要添加购物车图标
准备代码
代码运行预览
(三)引入字体图标样式
在<head>标签中用<link>标签引入字体图标文件中的iconfont.css文件
引入字体图标样式
(四)书写存放字体图标的HTML代码
1、在存放购物车的a标签之前添加同级标签——i标签,并将i标签的类名定义为.iconfont
添加同级标签—i标签
2、添加图标对应类名
用谷歌浏览器打开iconfont文件夹中的demo_index.html文件,切换到Font class选项下,找到心仪的购物车图标,复制图标下的类名(.icon-gouwuchefill)到标签类中
iconfont文件目录
图标的类名
添加图标对应类名
可以看到购物车之前已经成功添加了小图标,但是颜色和大小还不符合要求
运行代码结果
(六)设置字体图标的样式
字体图标可以像文字一样设置其大小,颜色等样式,设置属性和文字一样。
文中给字体图标设置了大小12像素,红色
设置字体图标的样式
代码运行结果
*请认真填写需求信息,我们会在24小时内与您取得联系。