请选择 进入手机版 | 继续访问电脑版

万邦! 学习论坛

 找回密码
 立即注册
搜索
查看: 241|回复: 6

利用纯CSS制作一个图形.

[复制链接]

1

主题

4

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2017-4-18 15:44:51 | 显示全部楼层 |阅读模式
在web开发中,我们经常要用到一些小图标(加减勾叉等)。通常做法就两种:
  • 直接使用图片;
  • 使用css/svg直接在浏览器中绘制图标。
方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到,一堆图标的雪碧图,修改维护会相当麻烦!现在比较好的方案是使用webpack引入图片,小图直接转换成base64插入css中。直接使用图片比较简单,这也是目前比较主流的做法。
方案2: 相比方案1,明显可以减小资源的体积,只需要几条css/svg命令就可以绘制出精美的图标,而且不受图片尺寸限制,可大可小非常灵活。初看方案2的一堆代码可能会觉得非常难,但其实很多简单的图标都是非常容易实现的。
好了本人不爱多哔哔
直接上代码手把手教你们怎么制作一个漂亮的图形!

使用CSS绘制线条,用到的不外乎两个属性:border box-shadow。而形状则可以用 border-radius、transform控制变形,位置则会用到绝对定位position: absolute、transform、margin等属性来调整。CSS的绘图,做过几个就知道大概是怎么回事了,归根到底,还是几何。如果觉得几何烧脑,那就直接用iconoo 吧。
这是一个最简单的加号;
             .plus {
    box-sizing : border-box;
    display    : inline-block;
    position   : relative;
    font-size  : 20px;
}

.plus:before, .plus:after {
    content        : '';
    pointer-events : none;
    position       : absolute;
    left           : 50%;
    top            : 50%;
    transform      : translate(-50%, -50%);
    box-shadow     : inset 0 0 0 1em;
}

.plus:before {
    width  : 1em;
    height : 2px;
}

.plus:after {
    height : 1em;

    width  : 2px;

代码还是非常简单的,首先我们这里用到了before和after两个伪类增加可用的标签,不然只有一个标签,要玩出花来实在是太难。content顾名思义就是内容,里面可以加各种字符,甚至是换行之类的控制符。而pointer-events:none则是消除了鼠标指针事件,这样元素就具有穿透性了,具体细节还请自行搜索哈,这里就不多说了。绘图的核心,就是通过设置两个伪类的宽高和阴影来绘制横竖两条线,位置方面是通过绝对定位+反向偏移的方式,巧妙利用了这两个属性百分比参照的不同实现了横竖的居中。所有尺寸除了线宽(2px)外都使用em这个相对单位,所以调整font-size的值就可以调整图标的大小了。要调整线宽呢,就将所有px单位的尺寸都一并改了即可。
是不是赶脚很简单快自己动手试试吧

11

主题

19

帖子

88

积分

注册会员

Rank: 2

积分
88

最佳新人

发表于 2017-4-18 15:47:30 | 显示全部楼层
厉害,多发一点基础学习的细节
回复

使用道具 举报

10

主题

24

帖子

4160

积分

论坛元老

Rank: 8Rank: 8

积分
4160

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2017-4-18 15:47:53 | 显示全部楼层
放个最终效果图啊
回复

使用道具 举报

1

主题

4

帖子

18

积分

新手上路

Rank: 1

积分
18
 楼主| 发表于 2017-4-18 15:48:44 | 显示全部楼层
shinyiqi 发表于 2017-4-18 15:47
放个最终效果图啊

代码都放出来了同学你就不能自己做做看吗
回复

使用道具 举报

10

主题

24

帖子

4160

积分

论坛元老

Rank: 8Rank: 8

积分
4160

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2017-4-18 15:49:08 | 显示全部楼层
ycq895248512 发表于 2017-4-18 15:48
代码都放出来了同学你就不能自己做做看吗

厉害了我的哥
回复

使用道具 举报

1

主题

4

帖子

18

积分

新手上路

Rank: 1

积分
18
 楼主| 发表于 2017-4-18 15:49:39 | 显示全部楼层
宋老师 发表于 2017-4-18 15:47
厉害,多发一点基础学习的细节

可以
回复

使用道具 举报

1

主题

4

帖子

18

积分

新手上路

Rank: 1

积分
18
 楼主| 发表于 2017-4-18 15:50:02 | 显示全部楼层

你们是从哪里看到这个论坛的?
回复

使用道具 举报

QQ|Archiver|手机版|小黑屋|万邦易嵌学习论坛. ( 京ICP备17017219号 )

GMT+8, 2018-10-15 19:03

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表